I practiced a little CSS animations syntax today using jsfiddle. I may have also come across a bug. Not sure at this point, I have to do some more testing, and I haven’t even done any searches online yet to see if others have run into this. Who knows, it might even be in the spec; I just haven’t had time to look elsewhere.

Basically, the issue I ran into was when I tried to apply all of the animations to one element by adding all three of the classes I have in the CSS, the only one that animates is the last class selector in the CSS. Not the last class in the attribute of the element, not the last @-keyframes, but the last selector. You can also see that I don’t even have any of the other prefixes in the CSS besides -moz. I just wanted to post this quick, and maybe I’ll update this post later.

(I learned that Opera does not support CSS 3 Animations at the time of this writing. Also weird behavior on the embedded jsfiddle in Chrome/Safari when hovering over the rotate ones [iframe blackout, text looks different...].)

UPDATE: So I looked at the spec and here is a quote from it:

In the case of multiple animations specifying behavior for the same property, the animation defined last will override the previously defined animations.

That only partly answers my question… I have animations that are all affecting different properties, not the same property. Right? (opacity, top, transform). Hmm.. more searching on this might be needed.

UPDATE 2: I posted over on the CSS-Tricks forums. I just wasn’t thinking of this the right way. http://css-tricks.com/forums/discussion/14136/multiple-css-animations-on-different-classes