在firefox上工作的CSS3動畫，但不在鉻上

Question

請不要這麼難對我的第一個問題。

我在這個主題上發現了許多答案，但是在這個主題之前，我只找到有關使用-webkit-我認爲自己做得很好的解決方案，或者將非標記動畫放在底部，我也這樣做。

所以我有這個盒子（還有一些更好），由divs製成，可點擊，很小，當有人按下按鈕「幫助」時，我希望可點擊的對象做一個動畫來顯示它們是可點擊的。

爲了達到這個目的，我在更大的容器（#body翻譯）上設置了一個類（.ayuda），它匹配CSS的「.ayuda .help」並觸發Firefox上的動畫，但是在Chrome上它不會「對於任何動畫將不起作用（它什麼都沒有）

HTML

<div id="cuerpo"> 
    <div id="pegatina"> 
     <div id="north_vul" class="NS_vul help" onclick="changevul('NS')"></div> 
     <div id="west_vul" class="EW_vul help" onclick="changevul('EW')"></div> 
     <div id="east_vul" class="EW_vul help" onclick="changevul('EW')"></div> 
     <div id="south_vul" class="NS_vul help" onclick="changevul('NS')"></div> 
     <div class="estuchenum help2" onclick="eticlick()"><p></p></div> 
    </div> 
<section id="botones_crear"> 
     <p class="blue button" onclick=" $('#cuerpo').addClass('ayuda'); setTimeout(function() {$('#cuerpo').removeClass('ayuda');},2000);">HELP</p>   
    </section> 
</div> 

CSS

.NS_vul{ 
cursor: pointer; 
height: 15%; 
border: 1px solid rgb(78, 78, 78); 
} 
.EW_vul{ 
cursor: pointer; 
width: 18%; 
border: 1px solid rgb(78, 78, 78); 
top: 22%; 
bottom: 23%; 
} 

#north_vul{ 
position: absolute; 
top: 2%; 
left: 2%; 
right: 2%; 
} 
#south_vul{ 
position: absolute; 
bottom: 2%; 
left: 2%; 
right: 2%; 
} 
#west_vul{ 
position: absolute; 
left: 2%; 
} 
#east_vul{ 
position: absolute; 
right: 2%; 
} 
    .ayuda .help{ 
       z-index:200; 
      -webkit-animation: ayuda 1s linear; 
      -moz-animation: ayuda 1s linear; 
      -ms-animation: ayuda 1s linear; 
      -o-animation: ayuda 1s linear; 
      animation: ayuda 1s linear;   
    } 

    .ayuda .help2{ 
       z-index:210; 
      -webkit-animation: ayuda2 2s linear; 
      -moz-animation: ayuda2 2s linear; 
      -ms-animation: ayuda2 2s linear; 
      -o-animation: ayuda2 2s linear; 
      animation: ayuda2 2s linear;   
    } 


    @-webkit-keyframes ayuda { 
      0% { transform: scale(1.0);} 
      25% { transform: scale(1.5) rotate(-30deg)} 
      50% { transform: scale(1.5);} 
      75% { transform: scale(1.5) rotate(+30deg)} 
      100% { transform: scale(1.0);} 
    } 
    @-moz-keyframes ayuda { 
      0% { transform: scale(1.0);} 
      25% { transform: scale(1.5) rotate(-30deg)} 
      50% { transform: scale(1.5);} 
      75% { transform: scale(1.5) rotate(+30deg)} 
      100% { transform: scale(1.0);} 
    } 
    @-ms-keyframes ayuda { 
      0% { transform: scale(1.0);} 
      25% { transform: scale(1.5) rotate(-30deg)} 
      50% { transform: scale(1.5);} 
      75% { transform: scale(1.5) rotate(+30deg)} 
      100% { transform: scale(1.0);} 
    } 
    @-o-keyframes ayuda { 
      0% { transform: scale(1.0);} 
      25% { transform: scale(1.5) rotate(-30deg)} 
      50% { transform: scale(1.5);} 
      75% { transform: scale(1.5) rotate(+30deg)} 
      100% { transform: scale(1.0);} 
    } 
    @keyframes ayuda { 
      0% { transform: scale(1.0);} 
      25% { transform: scale(1.5) rotate(-30deg)} 
      50% { transform: scale(1.5);} 
      75% { transform: scale(1.5) rotate(+30deg)} 
      100% { transform: scale(1.0);} 
    } 

    @-webkit-keyframes ayuda2 { 
      0% { transform: scale(1.0);} 
      10% { transform: scale(1.5) } 
      30% { transform: scale(1.5) rotate(-90deg)} 
      50% { transform: scale(1.5) rotate(-180deg)} 
      70% { transform: scale(1.5) rotate(-270deg)} 
      90% { transform: scale(1.5) rotate(-360deg)} 
      100% { transform: scale(1.0) rotate(-360deg)} 
    } 
    @-moz-keyframes ayuda2 { 
      0% { transform: scale(1.0);} 
      10% { transform: scale(1.5) } 
      30% { transform: scale(1.5) rotate(-90deg)} 
      50% { transform: scale(1.5) rotate(-180deg)} 
      70% { transform: scale(1.5) rotate(-270deg)} 
      90% { transform: scale(1.5) rotate(-360deg)} 
      100% { transform: scale(1.0) rotate(-360deg)} 
    } 
    @-ms-keyframes ayuda2 { 
      0% { transform: scale(1.0);} 
      10% { transform: scale(1.5) } 
      30% { transform: scale(1.5) rotate(-90deg)} 
      50% { transform: scale(1.5) rotate(-180deg)} 
      70% { transform: scale(1.5) rotate(-270deg)} 
      90% { transform: scale(1.5) rotate(-360deg)} 
      100% { transform: scale(1.0) rotate(-360deg)} 
    } 
    @-o-keyframes ayuda2 { 
      0% { transform: scale(1.0);} 
      10% { transform: scale(1.5) } 
      30% { transform: scale(1.5) rotate(-90deg)} 
      50% { transform: scale(1.5) rotate(-180deg)} 
      70% { transform: scale(1.5) rotate(-270deg)} 
      90% { transform: scale(1.5) rotate(-360deg)} 
      100% { transform: scale(1.0) rotate(-360deg)} 
    } 
    @keyframes ayuda2 { 
      0% { transform: scale(1.0);} 
      10% { transform: scale(1.5) } 
      30% { transform: scale(1.5) rotate(-90deg)} 
      50% { transform: scale(1.5) rotate(-180deg)} 
      70% { transform: scale(1.5) rotate(-270deg)} 
      90% { transform: scale(1.5) rotate(-360deg)} 
      100% { transform: scale(1.0) rotate(-360deg)} 
    } 

Answer 1

使用這種syntax的WebKit的

@-webkit-keyframes pulse { 
0% { 
    background-color: red; 
    opacity: 1.0; 
    -webkit-transform: scale(1.0) rotate(0deg); 
} ... 

這是說「-webkit-變換」，而不只是「變換」