css3 animation not working in chrome
Chrome v43 dropped the -webkit- prefix for animation so if this worked before but not now, that's probably why.
You have to put the general animation rule after the browser specific ones:
-webkit-animation: aia2 5s linear infinite alternate;
-moz-animation: aia2 5s linear infinite alternate;
-ms-animation: aia2 5s linear infinite alternate;
-o-animation: aia2 5s linear infinite alternate;
animation: aia2 5s linear infinite alternate; /* this comes last */
And since you have -webkit-animation: aia2
, -moz-animation: aia2
etc. you have to set the animation for each browser like:
@-moz-keyframes aia2{
...
}
@-webkit-keyframes aia2{
...
}
@-o-keyframes aia2{
...
}
One thing to check if you're developing in Firefox is Firefox will take an animation-name in quotes, but Chrome/Edge/Safari/Webkit will not.
Acceptable ONLY in Firefox:
animation-name: 'theAni';
Acceptable in all browsers (Chrome, Edge, Safari & Firefox):
animation-name: theAni;