CSS keyframe based JavaScript events

Recently I had to build a combined CSS animation: when first animation is at 5%, the next animation should start. Well, the problem is that the current JS API doesn’t have any events to track css animation keyframe progress (other than start, end and iteration/loop). So, with the newly discovered – by me – requestAnimationFrame, I started to fool around And I ended with a nice Github repo containing the plugin.

Of course, you need a requestAnimationFrame shim. Good, how to use?

CSS keyframes

CSS3 added some kind of custom animation. Instead of having linear animation, you can control various behavior based on animation progress:

.ani {
    -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes foo {
  0% { left:0; }
  25% { left: 150px; }
  100% { left:500px; }
}

.foo {
  -webkit-animation-name: foo;
  animation-name: foo;
}

To animate an element, you just need to add both .ani and .foo. Nothing big, right? The script I did detects current keyframe and trigger an event.

JavaScript Events

As I said, JS provides only three events: animationEnd, animationStart and animationIteration (you can read more about this here). you can add an extra keyframe event, just like so:

That’s it!

Issues?

Currently, the script is only detects 5% intervals. So if you need a keyframe at 82%… Good luck!
Also, the script doesn’t always trigger 100% keyframe. But since we already have animationEnd event, this is not a big problem, no?

Github repo.

Demo

I was lucky enough to need this to work only on chrome. Therefore the demo will only work on chrome. Feel free to fork my gist and improve