CSS Advanced
CSS Transitions
A transition smoothly animates a property from its old value to a new one over time, instead of changing it instantly. Transitions are the simplest way to add polish to hover states, focus rings, and toggles.
The four transition properties
A transition is defined by which property changes, how long it takes, the acceleration curve, and an optional delay before it starts.
| Property | Purpose |
|---|---|
| transition-property | Which CSS property to animate (or all) |
| transition-duration | How long the change takes (e.g. 0.3s) |
| transition-timing-function | The speed curve (ease, linear, etc.) |
| transition-delay | Wait time before the transition starts |
.btn {
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
/* Shorthand: property duration timing delay */
.btn { transition: background-color 0.3s ease-in-out 0s; }<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; display:grid; place-items:center; height:200px; background:#0f172a; }
.btn {
padding: 14px 32px; border:none; border-radius:10px; color:#fff;
background:#6366f1; font-size:16px; font-weight:bold; cursor:pointer;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.btn:hover {
background:#4338ca; transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(67,56,202,.5);
}
</style>
</head>
<body>
<button class="btn">Hover me</button>
</body>
</html>Timing functions
The timing function shapes how speed changes over the duration. ease starts and ends slowly, linear is constant, and cubic-bezier lets you design any custom curve, including bouncy overshoots.
| Timing function | Feel |
|---|---|
| ease | Slow start, fast middle, slow end (default) |
| linear | Constant speed |
| ease-in | Slow start |
| ease-out | Slow end |
| cubic-bezier(...) | Fully custom curve |
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; padding: 30px; background:#f1f5f9; }
.track { background:#e2e8f0; border-radius:999px; margin:10px 0; padding:6px; }
.dot { width:36px; height:36px; border-radius:50%; background:#ec4899; }
.track:hover .dot { transform: translateX(240px); }
.l .dot { transition: transform 1s linear; }
.e .dot { transition: transform 1s ease-in-out; }
.b .dot { transition: transform 1s cubic-bezier(.68,-0.55,.27,1.55); }
</style>
</head>
<body>
<p>Hover a track to move the dot.</p>
<div class="track l"><div class="dot"></div></div>
<div class="track e"><div class="dot"></div></div>
<div class="track b"><div class="dot"></div></div>
</body>
</html>Transitioning multiple properties
List several transitions separated by commas, each with its own duration and delay. Staggering delays creates a pleasant cascade effect.
.card {
transition:
transform 0.3s ease,
box-shadow 0.3s ease 0.05s,
background 0.5s linear;
}Animate cheap properties like transform and opacity for smooth 60fps results. Animating width, height, or top forces layout and can stutter.
A transition needs a starting value and an ending value in the CSS. You cannot transition to or from auto (like height: auto) reliably.
Key points
- Transitions animate a property change over a duration.
- The shorthand order is property, duration, timing, delay.
- Timing functions shape acceleration; cubic-bezier is fully custom.
- Comma-separated transitions animate several properties at once.
- Prefer transform and opacity for the smoothest performance.