Animation CSS3 travaillant sur firefox mais pas sur chrome

Question

S'il vous plaît ne soyez pas si dur avec moi c'est ma première question.

J'ai trouvé beaucoup de réponses sur ce site avant de trouver sur ce sujet des solutions à l'utilisation de -webkit- que je pense faire correctement, ou de mettre en bas l'animation non-tag que je fais aussi. J'ai donc ces boîtes (et d'autres encore), faites de divs, qui sont cliquables et minuscules, et quand quelqu'un appuie sur le bouton "HELP" je veux que les objets cliquables fassent une animation pour montrer qu'ils sont cliquables . Pour y parvenir, je place une classe (.ayuda) sur le plus grand conteneur que j'ai (#body traduit), ceci correspond à ".ayuda .help" pour css et déclenche l'animation sur Firefox, mais sur Chrome il ne l'est pas. « t travail pour l'une des animations (il ne fait rien du tout)

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

utilisent ce syntax pour webkit

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

c'est-à-dire « webkit-transform: » au lieu de « transformer »