<style>
@keyframes shake {
0% {
-moz-transform:scale(0);opacity:0;
}
25% {
-moz-transform:scale(1.3);opacity:1;
}
50% {
-moz-transform:scale(0.7);opacity:1;
}
75% {
-moz-transform:scale(2);opacity:1;
}
100% {
-moz-transform:scale(1);opacity:1;-moz-transform:rotate(45deg);
}
}
</style>
<div style="-moz-animation-duration:2s;" onclick='this.style.mozAnimationName="shake";'>TEST</div>
While this code functions properly in Google Chrome using the -webkit prefix, it encounters issues in Firefox with the -moz prefix.
Is there a workaround for this problem, or is it simply a mistake on my end? I am looking for a solution that does not involve incorporating jQuery into the code.