CSS Transitions
transition animates property changes — hover, focus, class toggles. Pure CSS, no JavaScript required.
The four sub-properties
| Property | Purpose | Example |
|---|---|---|
transition-property | Which property to animate. all or a name. | opacity, transform |
transition-duration | How long. | 0.2s |
transition-timing-function | Easing curve. | ease-out, cubic-bezier(0.2, 0.8, 0.2, 1) |
transition-delay | Wait before starting. | 50ms |
The shorthand
CSS
.btn {
background: #04AA6D;
transition: background 0.2s ease-out, transform 0.15s ease;
}
.btn:hover {
background: #038F5C;
transform: translateY(-2px);
}
What you can and can't transition
| Can | Can't (until @starting-style) |
|---|---|
color, background, opacity | display (use visibility + opacity). |
transform, filter | height: auto (use grid-template-rows: 0fr → 1fr). |
border-radius, box-shadow | Most non-animatable properties listed in the spec. |
Tip: Stick to
transform and opacity for animation hot paths — they avoid layout and paint and run at 60fps on weak devices.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Transitions</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Animate background colour over 200ms.
.btn { transition: background
; }
Either seconds or milliseconds.
Discussion
Loading…