CSS animations allow elements to move and change automatically over time.
Unlike transitions, animations do not need user actions like hover.
They are used for loaders, banners, notifications, and attention effects in modern websites.
This animation moves the box from left to right continuously.
The animation runs automatically without any user interaction.
This is a pulsing animation.
It is commonly used for notifications and call to action elements.
This is a simple loading spinner.
CSS animations are often used to show loading states.
Main parts of a CSS animation
- Animation name
- Duration
- Timing function
- Iteration count
Animations can control opacity, position, scale, and rotation.
They help create smooth visual experiences.
Practice task
Create an animation that:
- Moves an element
- Changes its size
- Runs automatically
Try different durations and speeds
Next lesson
In the next page, you will learn how to work with keyframes and animation properties.