What is a Transition?
A transition smooths out a property change over a duration, instead of it happening instantly. Transitions are commonly combined with pseudo-classes like :hover.
A Basic Transition
<style>
.btn {
background: steelblue;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn:hover {
background-color: #1f4260;
transform: scale(1.05);
}
</style>
<button class="btn">Hover me</button>transition Shorthand Parts
| Part | Purpose |
|---|---|
| property | Which property to animate, or "all" |
| duration | How long the transition takes, e.g. 0.3s |
| timing-function | The speed curve, e.g. ease, linear, ease-in-out |
| delay | How long to wait before starting |
Full Transition Shorthand
.card {
transition: transform 0.4s ease-in-out 0.1s;
}
/* property: transform, duration: 0.4s, easing: ease-in-out, delay: 0.1s */Transitioning Multiple Properties
Multiple properties can transition at once, either by listing them comma-separated with their own timing, or by using transition: all to animate every changing property with the same settings.
Card Hover Effect
<style>
.card {
width: 180px;
padding: 16px;
background: white;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
transform: translateY(-4px);
}
</style>
<div class="card">Hover this card</div>Not Every Property Can Transition
Only properties with an intermediate value between the start and end state can animate smoothly (like color, width, opacity, transform). Properties like display cannot be smoothly transitioned since there’s no "halfway" state between block and none.
Best Practice
Prefer transitioning transform and opacity over properties like width, height, or top — they can be animated efficiently by the browser’s compositor without triggering expensive layout recalculations.