Chain Multiple Animations on One Element in CSS


show more Chaining multiple animations on one element provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013) show less
please wait ...

Chaining multiple animations on one element

We've been creating and applying single animations to create our effects so far. But in practice, it's quite likely that you'll run into a project where you need multiple animations to create the movement you're after. Animating a character or demonstrating a software feature for instance, or even creating a longer playing effect will require more than one animation to complete it. We'll be animating a molecule graphic in isolation for this example, but this chaining technique can be used as part of any kind of linear animated content. We'll have our molecule rolling from the left and then scale up and back into its original position, and in the end it will look a little something like this.

Let's go to Coda and take a look at the HTML behind this example. Our HTML is pretty simple. We have a wrapper div and then one div with the class of mol for molecule, and that's the one we'll be using for our animation and the graphic. If we take a look at our starting style...

Chaining multiple animations on one element
Video duration: 8m 2s 1h 56m Intermediate

Viewers:

Chaining multiple animations on one element 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 ...