From the course: Creating Web Media

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Loop a CSS animation

Loop a CSS animation - CSS Tutorial

From the course: Creating Web Media

Start my 1-month free trial Buy for my team

Loop a CSS animation

“

- [Chris] Hi, this is Chris Converse, and in this episode we'll create a looping animation using only CSS. We'll start from a layout featuring a boat image in between two tiling graphics. And using the keyframes and animation features of CSS, we'll animate this scene. Now, we created these tiling graphics in an earlier episode in order to make our design responsive and once we've added our animation, the entire scene will remain responsive. So if you'd like to follow along with me, download the Exercise Files, and let's begin by opening index.html in a text editor. Now, once you have the HTML file open, you'll see down here under the article element is a figure element. The way we've created the layout is we have the div, with a class of waves and back, which are the back waves. We have the boat image, and then the front waves. So this creates the layering effect of the waves in the front being in front of the boat, and then the waves in the back being behind the boat. So to preview…

Contents