To control the timing and flow of CSS animations, you will often use several key properties in combination with @keyframes. The most important of these are animation-duration, animation-iteration-count, animation-direction, and animation-delay. Each property lets you fine-tune your animation's playback for different effects and use cases.

The animation-duration Property

Sets how long one cycle of the animation takes to complete. For example, a value of 2s makes the animation play for two seconds per cycle. This is essential for controlling the speed and feel of your animation.

The animation-iteration-count Property

Determines how many times the animation will repeat. You can set a specific number, such as 3, or use infinite to make the animation loop forever. This is useful for elements like loading spinners or attention-grabbing banners.

The animation-direction Property

Controls the direction in which the animation runs. The default is normal (forward), but you can also use reverse (backward), alternate (forwards then backwards), or alternate-reverse (backwards then forwards). This property is particularly effective when you want your animation to play back and forth smoothly.

The animation-delay Property

Dpecifies how long to wait before the animation starts. For instance, a delay of 1s begins the animation one second after the element loads or is triggered. This is helpful for staggering animations or delaying effects until a certain moment.

The loader spinner example demonstrates how each of these animation properties affects the animation's behavior.

By setting animation-duration: 1s, the spinner completes a full rotation every second, creating a smooth and continuous effect.

With animation-iteration-count: infinite, the animation never stops, which is ideal for indicating ongoing loading processes.

The use of animation-direction: alternate makes the spinner reverse its rotation direction on each cycle, resulting in a back-and-forth spinning motion rather than always moving in the same direction. This can make the animation more visually interesting and dynamic.

Finally, animation-delay: 0.5s ensures that the spinner waits half a second before it starts spinning, which can help coordinate multiple animations or avoid overwhelming the user with too many simultaneous effects.