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;