Exploring animation delay and the fill-mode property


show more Exploring animation delay and the fill-mode property provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013) show less
please wait ...

Exploring animation delay and the fill-mode property

In the last tutorial, we animated our unicycle rider across the screen. It was fun but pretty basic. Lucky for us, there are additional properties that give us a deeper level of control over our animations and let us give them a little more polish too. In this tutorial we'll look at properties like animation-delay and animation-fill-mode and how they can give us more control over how our unicycle rider moves. Right now our animation starts playing as soon as we load our page. What if we didn't want the animation to start playing right away? That's where the animation-delay property comes in handy. Let's go over to Coda to edit the CSS for this example.

And you can follow along with this example from the exercise files for this tutorial, or you can work with the files you created last time around. Either one will have you starting in the same place. So let's add an animation-delay to our unicycle rider animation. We'll add one additional property here called animation-delay, a...

Exploring animation delay and the fill-mode property
Video duration: 6m 6s 1h 56m Intermediate

Viewers:

Exploring animation delay and the fill-mode property provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013)

Subject:
Web
Software:
CSS
Author:
please wait ...