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

问题描述

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

问题解答

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

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

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