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第二個動畫效果進來。