transition
Animates the change of a property from the old value to the new one.
Syntax
transition: property duration easing delay;Values
| Parameter | Type | Description |
|---|---|---|
| property | ident | What to animate: `background`, `transform`, `all`. |
| duration | time | How long: `0.3s`, `200ms`. |
| easing | keyword | The speed curve: `ease`, `linear`, `ease-in-out`. |
| delay | time | A pause before the start: `0.1s`. |
Examples
A smooth color change on hover:
<style>
.btn { padding: 8px 16px; background: royalblue; color: white; border: 0; transition: background 0.3s ease; }
.btn:hover { background: crimson; }
</style>
<button class="btn">Hover over me</button>Several properties separated by commas:
<style>
.card { width: 160px; padding: 16px; background: whitesmoke; transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 6px 12px rgb(0 0 0 / 0.2); }
</style>
<div class="card">A card that lifts</div>Notes
transition is set on the element in its normal state, not on :hover — then the change is smooth both ways. transform and opacity animate most smoothly. Not every property can be animated: display jumps instantly.
See also
- :hover — Matches an element while the mouse pointer is over it.
- transform — Moves, rotates, scales or skews an element without affecting the layout around it.
- animation — Runs a `@keyframes` animation on an element.
- @starting-style — Sets the styles an element starts from when it first appears, so a `transition` can animate its entrance.
- transition-behavior — Allows transitions of discrete properties such as `display` and `overlay`, so an element can fade out before it disappears.
Related recipes
- How to add a hover effect
- How to add a shadow
- How to add a smooth transition
- How to animate height to auto
- How to animate opening a dialog or popover
- How to make a toggle switch
- How to make an accordion
- How to make an image grayscale
- How to respect reduced motion
- How to rotate an element
- How to scale an element on hover
- How to show an element on hover
- How to use a variable font
In the tutorial
- Transitions — Smooth style changes with transition — duration, delay, timing functions, what can be animated and where to write the transition.