Looping, Pausing, and Reduced Motion

How many times should an animation run? By default, the answer is once: the browser plays the keyframes from start to finish and then stops. This lesson uses one spinning square to show how to repeat an animation, how to change the direction of each repetition, how to pause it, and how to switch it off for people who ask their device for less motion.

Repeating an animation

The animation-iteration-count property sets how many times the animation runs. It takes a number, or the keyword infinite for an animation that never stops.

<!DOCTYPE html>
<html lang="en">
<head>