如题,我写了两个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:
<div class="show">完成</div>
测试:
1.给元素直接单独添加flash或shake-horizontal然后刷新页面,分别可以生效,同时添加这两个class,只有颤动效果。。
2.用js控制
$('#show').addClass('flash shake-horizontal');
setTimeout(function(){$('#show').removeClass('shake-horizontal')},1000);
先颤动,然后闪光。。
这是什么原因?我想要先同时颤动加闪光,1秒后颤动停止。
两个animation的类名调用,相当于你这个标签中同时出现了animation属性,那么应该就是会后面一个className覆盖了前面一个className中的animation,所以,你看到的就是一个动画效果。
如果你希望两个效果是同时存在的话,那么你可以在一个keyframes中把动画效果都写上,比如你的neon2这个类是from、to的形式,而shake-horizontal是从0到100的形式,那么就结合一下,都用0到100的形式来处理,放在一个className中。
如果是有先后顺序,后面可能会用到其中一个,而你又不想重写,只是想临时调用的话,那么就只有通过setTimeout的方式,在第一个animation结束之后把这个className给remove了,同时再addClass第二个动画效果进来。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。