Rumah > Soal Jawab > teks badan
如题,我写了两个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秒后颤动停止。
巴扎黑2017-04-17 11:30:25
两个animation
的类名调用,相当于你这个标签中同时出现了animation
属性,那么应该就是会后面一个className
覆盖了前面一个className
中的animation
,所以,你看到的就是一个动画效果。
如果你希望两个效果是同时存在的话,那么你可以在一个keyframes
中把动画效果都写上,比如你的neon2
这个类是from
、to
的形式,而shake-horizontal
是从0
到100
的形式,那么就结合一下,都用0
到100
的形式来处理,放在一个className
中。
如果是有先后顺序,后面可能会用到其中一个,而你又不想重写,只是想临时调用的话,那么就只有通过setTimeout
的方式,在第一个animation
结束之后把这个className
给remove
了,同时再addClass
第二个动画效果进来。