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.
You can say this to an AI Agent
Move the switch thumb between its two positions with a short transition that names only transform and color, not transition: all. Remove nonessential motion for reduced-motion preferences and verify rapid toggling keeps the correct state.
When to use it
- Hover and focus feedbackSave→Save
- Open or close a small paneltransition-property: backgroundtransition-duration: .25stransition-timing-function: ease-out
- Change color, opacity, or transformBrief feedbackTest by distanceLarger movement
- Help people follow a state change
When NOT to use it
- Animate every property with one broad ruletransition: allEven unintended width and padding changes are animated.
- Use a long transition for frequent controlshoverAn overly long color transition makes feedback feel slow.
- Animate layout-heavy properties without checking performance⚡
- Ignore reduced-motion settings→Transitioning width or height triggers reflow and can be janky.
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check