Performance Tips for Smooth CSS Animations

Not All Properties Are Equally Cheap to Animate

Some CSS properties can be animated by the browser using only the GPU, without recalculating page layout. Others force the browser to recompute layout or repaint large areas on every single frame, which can cause visible stutter, especially on lower-powered devices.

Properties That Animate Smoothly

Properties That Can Cause Jank

/* Expensive: triggers layout recalculation every frame */
.card:hover {
  width: 320px;
  margin-left: 20px;
}

/* Cheap: achieves a similar visual effect via transform */
.card:hover {
  transform: scale(1.05) translateX(10px);
}

Animating width, height, margin or top/left forces the browser to recompute the layout of surrounding elements on every frame. Achieving a similar visual result with transform avoids this layout cost entirely.

Using will-change Sparingly

.card {
  will-change: transform;
}

will-change hints to the browser that a property is about to animate, letting it prepare in advance. It should be used sparingly and only on elements that actually animate frequently - overusing it can waste memory and hurt performance rather than help it.

A Quick Performance Checklist

• Prefer transform and opacity for anything that animates often, like hover effects or scroll-driven reveals.
• Avoid animating width, height, or margin/position properties directly when a transform-based alternative exists.
• Test animations on a lower-end device, not just a fast development machine, since jank is often invisible on powerful hardware.