Question

I have a tough CSS3 Animation problem that I dont even know how to approach

there is <#box> with a css3 animation applied. When this animation ends, a new webkitAnimationEnd event adds a new class to <#box> that triggers a 2nd animation, when this 2nd animation ends, another webkitAnimationEnd event adds another class to <#box> that triggers a 3rd animation, and so on and so on…

Here’s what I have so far. I couldn’t figure out how to apply the multiple event listeners for different animations – http://jsfiddle.net/lesballard/uFbUj/15/

Is this even possible? (Sorry total noob here)

Thx in advance
-Les

Answer 1

Neither is it possible to subscribe listeners that would only be triggered by animations defined by specific css classes, nor is it neccessary.

You only need a single event listener, that, when triggered, removes the current class, and adds another one.

This can be done with a simple queueing mechanism, all you need is an array of class names, and an index that is being increased/decreased when the animation end event is triggered.

http://jsfiddle.net/uFbUj/26/