February 20, 2014
All The Right Moves Screencast, css animation, design, tutorials, video tutorial, web animation
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!
