I am trying to figure out a solid, cross-(modern)browser method for using CSS3 Animation Events and Event Listeners to gain fine-tuned control over CSS3 animations. I know its possible to do this. Sadly it's just WAY beyond my capabilities at the moment, despite all the research I've done in the last 2-3 weeks.

Here is my jsfiddle on this so far: http://jsfiddle.net/mvkMH/23/

Here is what I'm trying to do: I have a <ul> with an id of #main containing <li>'s with a class of .box. When a user clicks on any .box it adds the .move-y class to ($this) - it also simultaneously adds the .move-x class to the remaining list items. When the user clicks another .box, all the existing .move-y and .move-x classes are replaced with .move-y-rvs and .move-x-rvs classes. All the while using CSS3 Animation events to keep everything perfectly synced up.

Why CSS3 Animation Events?

  • CSS3 Animations are fast on iOS
  • CSS3 Animation triggered via jQuery allow you to 'restart' the animation if it has been played already (https://css-tricks.com/restart-css-animation/)
  • In theory, by using jQuery to keep track of AnimationStart, AnimationIteration and AnimationEnd events one can create very complex and interactive CSS3 animations.

Here is the way the script should work in my mind - I just couldn't get it to work in real life ;-)

  1. Upon clicking the .box element, Check #main for any .move-x and .move-y classes

  2. If .move-x and .move-y classes are detected:

    • replace those classes with move-x-rv
jquery css animation
Edit
Report