如题,我写了两个css3 animation动画,一个闪光,一个横向颤动,代码如下。
.flash{
-webkit-animation: neon2 1s ease-in-out infinite alternate;
-moz-animation: neon2 1s ease-in-out infinite alternate;
animation: neon2 1s ease-in-out infinite alternate;
}
.shake-horizontal {
transform-origin: center center;
-webkit-animation: shake-horizontal 200ms ease-in-out 3;
-moz-animation: shake-horizontal 200ms ease-in-out 3;
animation: shake-horizontal 200ms ease-in-out 3;
}
@-webkit-keyframes neon2 {
from {
text-shadow: 0 0 8px #fff,
0 0 24px #fff,
0 0 32px #228DFF,
0 0 35px #228DFF,
0 0 40px #228DFF;
}
to {
text-shadow: 0 0 4px #fff,
0 0 12px #fff,
0 0 16px #228DFF,
0 0 20px #228DFF,
0 0 24px #228DFF;
}
}
@-webkit-keyframes shake-horizontal {
10% {
transform: translate(-10px, 0); }
20% {
transform: translate(0px, 0); }
30% {
transform: translate(8px, 0);}
40% {
transform: translate(0px, 0);}
50% {
transform: translate(-6px, 0);}
60% {
transform: translate(0px, 0);}
70% {
transform: translate(4px, 0);}
80% {
transform: translate(0px, 0); }
90% {
transform: translate(-2px, 0);}
0%, 100% {
transform: translate(0, 0) rotate(0deg); }
}
html:
<p class="show">完成</p>
测试:
1.给元素直接单独添加flash或shake-horizontal然后刷新页面,分别可以生效,同时添加这两个class,只有颤动效果。。
2.用js控制
$('#show').addClass('flash shake-horizontal');
setTimeout(function(){$('#show').removeClass('shake-horizontal')},1000);
先颤动,然后闪光。。
这是什么原因?我想要先同时颤动加闪光,1秒后颤动停止。
Two
animation
class name calls are equivalent to theanimation
attribute appearing in your tag at the same time. Then the latterclassName
should overwrite theclassName
in the previousanimation
, so , what you see is an animation effect.If you want two effects to exist at the same time, then you can write all the animation effects in one
keyframes
. For example, yourneon2
class is in the form offrom
andto
, andshake-horizontal
is in the form of0
to100
, so combine it and process them all in the form of0
to100
, and put them in oneclassName
.If there is a sequence, one of them may be used later, and you don’t want to rewrite it, but just want to call it temporarily, then the only way is to use
setTimeout
after the end of the firstanimation
ThisclassName
is given toremove
, and at the same time theaddClass
second animation effect comes in.