Is it even possible to Listen to multiple CSS3 AnimationEnd events with jQuery?

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/

--