CSS Animatable
Most CSS properties can be animated with transition or @keyframes — but not all. Here are the ones that matter, plus performance notes.
Cheap, GPU-accelerated
| Property | Why it's fast |
|---|---|
transform | Compositor-only; no layout or paint. |
opacity | Same — compositor-only. |
filter | Compositor on modern browsers. |
Animatable but pricier (triggers paint or layout)
| Property | What changes when it animates |
|---|---|
color, background-color | Paint only — moderate cost. |
box-shadow | Paint — can be expensive with large blurs. |
border-radius | Paint. |
width, height, top, left, padding, margin | Layout + paint — usually avoid. |
Not directly animatable (use a workaround)
| Property | Workaround |
|---|---|
display | Use visibility + opacity, or modern @starting-style. |
height: auto | Use grid-template-rows: 0fr → 1fr trick. |
z-index | Discrete — snaps at 50% by default. |
Tip: Animate only
transform and opacity in the inner loop of a fast scroll or 60fps animation. Everything else risks jank on weaker 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 Animatable</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Which two properties are compositor-only and cheap to animate?
Answer:
and opacity
The property that moves/scales/rotates.
Discussion
Loading…