Delay and Repeat

Delay

As you probably noticed in the previous lesson's examples, the animation starts as soon as the page is loaded. To delay the starting time, use the animation-delay property:

p {
    animation-name: paragraphAnimation;
    animation-duration: 5s;

    animation-delay: 4s;
}

Repeat

To repeat an animation more than once, use the animation-iteration-count property:

p {
    animation-name: paragraphAnimation;
    animation-duration: 5s;

    animation-iteration-count: 2;
}

You can set the iteration count to infinite, in which case the animation will keep looping.