CSS Transitions
CSS transitions make it possible for element state changes (such as color, size, position) to happen gradually in an animated way, instead of instantly.
Simple color transition
With the transition property, the background color of a button can gradually change to another color on hover.
In this example, the button’s base color is set to blue, and on hover it changes to green with a slow transition.
Size change with transition
Transitions can be used not only for colors but also for sizes. A box’s width and height can gradually increase on hover.
Transition properties
A transition is built from multiple sub-properties, each controlling a specific part of the animation.
| Property | Description |
|---|---|
| transition-property | Specifies which CSS property the transition applies to. |
| transition-duration | The duration of the transition in seconds or milliseconds. |
| transition-timing-function | The timing function of the transition, such as ease, linear, ease-in, ease-out. |
| transition-delay | Delay before the transition starts. |
Tips for CSS transitions
The following tips will help you use CSS transitions effectively:
- Do not animate too many properties at once, as it can harm performance.
- Use short durations so the animation does not feel too slow.
- Combine transitions with :hover, :focus, or :active states for better user experience.
✨ 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.
