Looping and pausing animations let you control how long and under what circumstances an animation runs. With looping, you can make an animation repeat indefinitely or a set number of times. With pausing, you can stop an animation from playing temporarily—commonly used on user interaction.

Looping Animations

• animation-iteration-count:
  • This property specifies how many times an animation should repeat.
  • Setting it to infinite makes the animation loop endlessly.

Example: Infinite Rotation Animation

In this example, a box rotates continuously using an infinite loop.

Explanation:

• The @keyframes rotate rule defines an animation that rotates an element from 0° to 360°.
• The .rotating-box element uses animation-iteration-count: infinite to repeat the rotation forever, creating a smooth, continuous spin.

Pausing Animations

• animation-play-state:
  • This property controls whether the animation is running or paused.
  • Common values: running (default) and paused.
  • It can be used in conjunction with pseudo-classes to trigger pausing, like on hover.

Example: Pause Animation on Hover

In this example, a box rotates continuously until the user hovers over it, at which point the animation pauses.

Explanation:

• The @keyframes spin rule defines a full rotation animation.
• The .spin-box element continuously rotates using animation: spin 4s linear infinite;.
• When hovered, the animation-play-state is set to paused, stopping the animation until the pointer leaves the box.

By mastering looping and pausing techniques, you can create engaging animations that add depth and interactivity to your web pages—all while keeping control of their behavior and performance.