Animations become more powerful when you control how many times they run and in which direction.
You can make animations:
- Run once
- Loop forever
- Reverse direction
- Pause at the end
These controls help you design better user experiences.
Animation-iteration-count set to infinite makes the animation loop forever.
This is useful for loaders and background effects.
Animation-direction set to alternate makes the animation reverse each time.
This creates smooth back and forth motion.
Animation-fill-mode set to forwards keeps the final state of the animation.
This is commonly used for banners and modals.
Important animation controls
- animation-iteration-count controls how many times it runs
- animation-direction controls forward or reverse
- animation-fill-mode controls what happens after animation
- animation-play-state can pause or play animations
This example shows how animations can be paused using animation-play-state.
This is useful for interactive elements.
Practice task
Create an animation that:
- Loops infinitely
- Uses alternate direction
- Stops when hovered
- Keeps its final state when finished
Next lesson
In the next page, you will learn how to animate UI elements like buttons and loaders.