Multiple CSS Animations on Different Classes

[keithrw]

Basically, I have CSS animations defined that I am using on 3 different classes, and I tried applying all three classes to an element. Only one of the animations works on the element, and it’s the one that is last defined in the stylesheet. Anyone else find this issue? Is this correct behavior?

Blog post about it: http://keithwyland.com/2011/10/css-animations-practice-and-possibly-a-bug/

jsFiddle: http://jsfiddle.net/keithwyland/ys6vU/

Thanks!

[chrisburton]

Hmm. It seems to work in webkit just fine.

http://jsfiddle.net/dCGcN/

[keithrw]

Thanks for the reply ChristopherBurton. Did you hover over the “All of them! Only animates last class defined in the CSS. :(” one? When I hover over that one, only the fade animation goes.

[chrisburton]

Aah, didn’t notice that. I’ve never seen animations written with multiple classes on one element.

[joshuanhibbert]

This is normal behaviour. Think about how other CSS properties work, the one that is declared last is the one that is used. If you had an element that had three classes, each having a different background color, then the background color of the element will be that of the rule declared last in your CSS. You can have multiple animations declared but you need to group the rules like this:

animation: slide-up 3s infinite,

spin-the-box 5s infinite linear,

fade-in-out 3s infinite linear;

[keithrw]

Thanks for the reply joshuanhibbert. For some reason I had it in my head that “animation” wasn’t the property and that the property being affected by the @-keyframes was the one to focus on, but the way you describe it makes sense. The way you show grouping the rules is how I did it on the last one in the jsfiddle. Thanks for both of your time!

[joshuanhibbert]

No worries!

[Author]

Posts