Check out a free preview of the full CSS In-Depth, v2 course:
The "Iteration Count & Delays" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Iteration allows you to specify the number of times to perform an animation. Delay allows the animation to start later or part-way through the animation with negative values.

Get Unlimited Access Now

Transcript from the "Iteration Count & Delays" Lesson

[00:00:02]
>> Estelle: So we've figured out the steps, or the animation-timing-function. Now let's take a look at iteration-count. How many times do you want your animation to happen? The default is 1. By default it will happen just one time. You can tell it to animate as many times as you want, or you can use the key term infinite.

[00:00:22] So infinite or any number including a float. A negative number is pointless.
>> Estelle: Partial iterations work fine. So here,
>> Estelle: I go from 500px to 100px width,
>> Estelle: And height. And then I go, animation-iteration-count 0.5. And I just get rid of this.
>> Estelle: And it doesn't work, so I open this up and I say, why aren't you working?

[00:01:03]
>> Estelle: There it goes, because I have a stupid five-second delay. So, did you see how it didn't go all the way?
>> Estelle: Well, that's interesting. I have no clue what's going on, my computer is possessed.
>> Estelle: Okay.
>> Estelle: So I'm just going to do 0.1. Okay, and also it's just gonna stop and go away.

[00:01:32] Halfway mark. There we go. Okay, so it only went through half an animation. It doesn't need to be a full number.
>> Estelle: No iterations? That's fine, it'll still work. And you can see that it's actually gonna be blue cuz I put the key term forwards there. So it's actually going to the 100% mark even though there's no iteration.

[00:01:59]
>> Estelle: animation-delay is kind of interesting, because if you have a negative animation-delay, it'll start part way through the first animation. So I can, say, make the animation-delay: -4.0 seconds. And instead of waiting four seconds to start, it'll actually start four seconds before it started. And it's gonna jump halfway across the screen, and there it goes.

[00:02:23] But the second iteration will be a full iteration. So animation-delay, any time you want, default is 0 but you can actually use a negative number. If I use -10.0 seconds, it's gonna start part way through the second iteration.
>> Estelle: So it's only gonna be a six-second total. There we go.