Question

I have found many answers on this site before however on this subject I only find solutions about using -webkit- which I think I do properly, or put the non-tag animation on the bottom which I also do.

I have these boxes (and some more as well), made from divs, that are clickable and tiny, and when someone pushes the button "HELP" I want the clickable objects to do an animation to show they are clickable.

To achieve this I set a class (.ayuda) on the bigger container I have (#body translated), this matches the ".ayuda .help" for css and triggers the animation on Firefox, however on Chrome it doesn’t work for any of the animations( it does nothing at all)

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

use this syntax for webkit

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

that’s to say “-webkit-transform:” instead of just ‘transform’