問(wèn)題描述

如題，我寫了兩個(gè)css3 animation動(dòng)畫，一個(gè)閃光，一個(gè)橫向顫動(dòng)，代碼如下。

.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>

測(cè)試：1.給元素直接單獨(dú)添加flash或shake-horizontal然后刷新頁(yè)面，分別可以生效，同時(shí)添加這兩個(gè)class，只有顫動(dòng)效果。。2.用js控制

$(’#show’).addClass(’flash shake-horizontal’); setTimeout(function(){$(’#show’).removeClass(’shake-horizontal’)},1000);

先顫動(dòng)，然后閃光。。這是什么原因？我想要先同時(shí)顫動(dòng)加閃光，1秒后顫動(dòng)停止。

問(wèn)題解答

兩個(gè)animation的類名調(diào)用，相當(dāng)于你這個(gè)標(biāo)簽中同時(shí)出現(xiàn)了animation屬性，那么應(yīng)該就是會(huì)后面一個(gè)className覆蓋了前面一個(gè)className中的animation，所以，你看到的就是一個(gè)動(dòng)畫效果。

如果你希望兩個(gè)效果是同時(shí)存在的話，那么你可以在一個(gè)keyframes中把動(dòng)畫效果都寫上，比如你的neon2這個(gè)類是from、to的形式，而shake-horizontal是從0到100的形式，那么就結(jié)合一下，都用0到100的形式來(lái)處理，放在一個(gè)className中。

如果是有先后順序，后面可能會(huì)用到其中一個(gè)，而你又不想重寫，只是想臨時(shí)調(diào)用的話，那么就只有通過(guò)setTimeout的方式，在第一個(gè)animation結(jié)束之后把這個(gè)className給remove了，同時(shí)再addClass第二個(gè)動(dòng)畫效果進(jìn)來(lái)。