Member-only story
A Guide to CSS Animation — Part 2
Applying animations. Let’s start tweaking things! 🛠
Hey! You’re back 🙌
In Part 1, we got things moving. Now we will dig into applying animations. We already introduced animation-name and animation-duration, but there’s much more to look at.
Don’t forget, all the code is available in the following CodePen collection 👍 That way you can edit and play around with the examples.
animation-iteration-count
Let’s pick up from where we left off with by modifying our first animation. If you need a little refresher, this is what we had.
But the animation only ran once. What if we wanted the animation to run many times or not even stop? In the case of loading animations, we may want the animation to be infinite. This is where animation-iteration-count comes into play.
Let’s say we wanted the animation to run five times.
It’s as easy as that. Let’s turn our spinning square into a loading spinner. To do this, animation-iteration-count also accepts the keyword infinite 👍
Which gives us the following 🎉
