CSS Transitions Explained, With Simple Examples
A CSS transition makes a change happen smoothly instead of instantly, for example a button that gently changes color when you hover over it. It is one of the simplest ways to make a website feel polished.
The four parts of a transition
The transition property has four parts: which property to animate (such as background-color or transform), how long it takes (such as 0.2s), the timing function that shapes the speed (such as ease or ease-in-out) and an optional delay. Written together: transition: background-color 0.2s ease;
A simple button example
Give a button a background color, then a different color in its :hover style. Add transition: background-color 0.2s ease; to the button, and the color will fade instead of jumping. You can list several properties separated by commas, for example transform and box-shadow for a gentle lift.
What animates smoothly
Changes to opacity and transform (move, scale, rotate) are usually the smoothest, because browsers can handle them efficiently. Animating width, height or top/left can feel jumpy on slower phones. Keep most transitions short, between about a tenth and a third of a second.
Respect motion preferences
Some visitors turn on 'reduce motion' in their device settings. Use the prefers-reduced-motion media query to shorten or remove transitions for them. Motion should help people notice a change, never get in the way of reading.
Quick checklist
- Animate opacity and transform for the smoothest results.
- Keep most transitions short.
- Use prefers-reduced-motion to calm motion for those who ask.
- List several properties with commas, not 'all'.
Frequently asked questions
What is the difference between a CSS transition and an animation?
A transition runs when a property changes, such as on hover; a CSS animation uses keyframes and can run on its own or loop.
Can I transition multiple properties?
Yes. Separate them with commas, for example: transition: transform 0.2s ease, box-shadow 0.2s ease;
Why is my CSS transition not working?
Common causes are trying to animate a property that cannot be animated (such as display), a missing start value, or the change happening without a state change.
