Screencast: CSS Animation Events Explained!

It’s been ages since I last recorded a screencast, so I’m very happy to say I’ve just posted a new one on Vimeo! This latest addition is all about CSS animation events, in fact, it’s called CSS Animation Events Explained and it covers everything you need to know to use CSS animation events! (animationstart, animationiteration and animationend.)

Just to make it one better than that, it’s also part of a new tutorial series I’ve started called All The Right Moves. So, there are more tutorials to come in the next few weeks! Yay!

CSS Animation Events Explained!

Tutorial Links:

Follow along with the example on codepen

For more details on dealing with prefixed event names for animation related events check out this site point article. (Not all the event name variations listed in this article are still required for current versions of modern browsers though.)

This stackoverflow post has a handy code snippet for checking the animation name returned from the event.

If you want to brush up on JavaScript events MDN has a great primer for you.

MDN also has you covered for current browser support and current event name prefixes.

CSS Tricks has a short example of using animation events in this article as well because they are awesome.

I hope you enjoy the tutorial! If you have any burning questions about animating on the web, let me know. It might just end up in a future episode! Episode two will be out next week!

  • Van Mendoza

    was she sick when she recorded this? my lungs and chest felt congested just listening to the narration haha

  • valhead

    More like terrible allergies. I’ve been that congested for weeks! I guess it is pretty funny to hear.

  • Despite your allergies, still a nice run through Van.

  • valhead

    Thanks!

  • Felix Cruz

    Really enjoyed it. Thanks, Val!

  • Great tutorial! This would be really handy in managing the CSS-first carousel I built last month (two text block & images that animated in & out almost simultaneously per slide). I used a JS function to rotate through the slide elements, adding & removing `.active`, but that required a hacky way to keep CSS & JS timings lined up (used an “unnecessary” z-index on an unaffected element). With event listeners, I would have been able to keep all my timings in CSS and just move the `.active` class to the next element as they finish. Feels like that would be much cleaner code.

    Out of curiosity, is there a library to detect these events on all elements? That would be *really* useful for debugging CSS animations!

  • valhead

    Thanks!
    I don’t know of a library specifically just for that. I usually just toss something together as I need it. Maybe I should clean it up a bit and share it if I’m not the only one who things it’s useful!