CSS Animations
CSS animations allow an element’s appearance to gradually change, such as color, size, position, or opacity. Animations are essential for creating modern, dynamic websites.
Simple animation with @keyframes
The @keyframes rule defines the steps of an animation. We can specify how an element changes from the initial to the final state.
In this example, a box’s background color changes from red to yellow and back again with infinite repetition.
Animation properties
Animations can be controlled with several sub-properties. Some of these include the name, duration, timing function, delay, and number of iterations.
| Property | Description |
|---|---|
| animation-name | Specifies which @keyframes animation to use for the element. |
| animation-duration | The duration of the animation in seconds or milliseconds. |
| animation-timing-function | The timing function of the animation (e.g., ease, linear, ease-in, ease-out). |
| animation-delay | How long to wait before the animation starts. |
| animation-iteration-count | How many times the animation should repeat (for example, it can be infinite). |
| animation-direction | The direction of the animation (e.g., normal, reverse, alternate). |
Tips for CSS animations
The following tips will help you make animations not only visually appealing but also efficient:
- Use animations in moderation: too much motion can be distracting.
- Animate performance-friendly properties (e.g., transform, opacity) rather than layout-affecting ones (e.g., width, height).
- Combine animations and transitions for a more natural effect.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
