How to Create a Seamless Looping Animation With CSS


show more Creating a seamlessly looping animation provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013) show less
please wait ...

Creating a seamlessly looping animation

In this tutorial we'll be creating an infinite looping animation. CSS is great for this type of animation because it makes it possible to set up an infinite loop with less code than most other methods. We'll be creating a couple of animated clouds that drift across the sky, just like the ones you're looking at here. We'll also look at the animation shorthand syntax and the idea of sharing one animation across multiple elements. So first, let's go into Coda and take a look at the HTML behind this example. You can see our setup is pretty simple. We have a div with the class of sky, and within that we have two divs with the class of cloud.

Note that each cloud div has two classes, one that is shared between the two of them, and one that's unique to each. We'll use that unique class to create slight variations on the animation for each cloud and the shared class for all the common styles between the two. If we go into our CSS and take a look at our initial styles, you can se...

Creating a seamlessly looping animation
Video duration: 6m 27s 1h 56m Intermediate

Viewers:

Creating a seamlessly looping animation 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 ...