Transition
You might say
The button color changes too abruptly. Can it ease into the new color?
Smooth the change between two visual statesA transition animates a CSS property when its value changes, such as color on hover or a panel opening. Use it to clarify cause and effect, keep the duration short, and respect reduced-motion preferences. Not every property animates smoothly or cheaply.
When to use it
- Hover and focus feedback
- Open or close a small panel
- Change color, opacity, or transform
- Help people follow a state change
When NOT to use it
- Animate every property with one broad rule
- Use a long transition for frequent controls
- Animate layout-heavy properties without checking performance
- Ignore reduced-motion settings
Anatomy
Default→Hovertransition-property: backgroundtransition-duration: .25stransition-timing-function: ease-out
A state change like hover or selection — the starting point of every transition
List the properties that should transition; avoid all when unrelated changes may be animated
How long it takes; test against distance, task, and motion preferences
The speed curve that gives the motion its character
Variants
Color
→
Hover color shifts and selected states
Transform
Lift
Lifts and slide-ins via transform — best performance
Opacity
Fade-in entrances and fade-out exits
Typical use cases
Button hover
Write your thoughts…
🖱️
→
transition: background .25s ease
Dropdown opening
New message alerts
Weekly digest email
Dark mode
The knob uses a transform transition; the ghost on the left shows its path
Accordion
Transform and shadow provide the hover feedback, then settle smoothly on exit
Theme change
Modal and mask opacity
ease with opacity
Further reading