html - css3两个keyframe为什么不能同时执行?

时间:2022-01-19 00:58:40 浏览:20次

问题描述

如题,我写了两个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秒后颤动停止。

问题解答

回答1:

两个animation的类名调用,相当于你这个标签中同时出现了animation属性,那么应该就是会后面一个className覆盖了前面一个className中的animation,所以,你看到的就是一个动画效果。

如果你希望两个效果是同时存在的话,那么你可以在一个keyframes中把动画效果都写上,比如你的neon2这个类是from、to的形式,而shake-horizontal是从0到100的形式,那么就结合一下,都用0到100的形式来处理,放在一个className中。

如果是有先后顺序,后面可能会用到其中一个,而你又不想重写,只是想临时调用的话,那么就只有通过setTimeout的方式,在第一个animation结束之后把这个className给remove了,同时再addClass第二个动画效果进来。

相关推荐
评论
评论
发 布