March 13, 2014
All The Right Moves Screencast, css, css animation, tutorials, video tutorial, web animation
Episode two of my All The Right Moves web animation tutorial series is up! This time around I show you how to make your CSS animations more modular and how to apply multiple animations to one element. Breaking up your animations into smaller chunks makes it easier to follow your code and makes for more re-useable animations. Both good things in my book.
This tutorial covers applying multiple animations to one element one right after the other using delays, as well as applying more than one animation to an element at the same time. Plus tips on how to organize your keyframes when using more than one animation at once. All in less than 10 minutes!
Getting Modular with CSS Animations:
If you didn’t catch the first episode,CSS animation events explained, check out the whole series of All The Right Moves on vimeo.
Tutorial Links:
Follow along with the example on codepen. This tutorial covers all the steps to create the adding items animation.
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!
Tutorial Tips:
To sum up the two main tips at the end of this tutorial:
#1 – When using more than one set of keyframes at the same time, be sure that those keyframes aren’t trying to change the same property. This tends to result in strange, unexpected behaviours.
#2 – Avoid gaps between the duration of your first animation and the delay on the second. There’s some rather inconsistent browser behaviour when this happens, so I find it best to avoid it entirely for now.
