Creating smooth, performant CSS animations requires understanding how browsers render pages and which properties can be animated efficiently. The difference between a janky 20fps animation and a silky 60fps experience often comes down to a few key optimization techniques.

Understanding the Rendering Pipeline

When something changes on screen, the browser may need to perform several steps:

1. Style: Calculate which CSS rules apply

2. Layout: Calculate element sizes and positions

3. Paint: Fill in pixels for each element

4. Composite: Draw layers in correct order

The fewer steps required, the faster the animation. Different CSS properties trigger different stages.

Properties and Their Performance Cost

Best Performance: Composite-Only Properties

These properties only trigger compositing, making them ideal for animations:

CSS

/* GPU-accelerated, composite-only */
.optimized {
  transform: translateX(100px);
  transform: translateY(50px);
  transform: translate(100px, 50px);
  transform: scale(1.2);
  transform: rotate(45deg);
  opacity: 0.5;
}

Paint-Triggering Properties

These trigger paint but not layout:

CSS

/* Triggers paint */
.paint-triggers {
  color: red;
  background-color: blue;
  box-shadow: 0 0 10px black;
  border-color: green;
}

Layout-Triggering Properties (Avoid Animating)

These force the browser to recalculate layout for the entire page:

CSS

/* AVOID animating these */
.layout-triggers {
  width: 200px;
  height: 100px;
  padding: 20px;
  margin: 10px;
  top: 50px;
  left: 100px;
  font-size: 16px;
}

Optimizing Animations

Use Transform Instead of Position

CSS

/* Bad: triggers layout on every frame */
@keyframes move-bad {
  from { left: 0; }
  to { left: 100px; }
}

/* Good: composite only */
@keyframes move-good {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

Use Opacity Instead of Visibility/Display

CSS

/* Bad: visibility doesn't transition smoothly */
.fade-bad {
  transition: visibility 0.3s;
}

/* Good: opacity is GPU-accelerated */
.fade-good {
  transition: opacity 0.3s;
}

/* Combine for accessible hiding */
.fade-out {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

Use Scale Instead of Width/Height

CSS

/* Bad: triggers layout */
.grow-bad {
  transition: width 0.3s, height 0.3s;
}
.grow-bad:hover {
  width: 120%;
  height: 120%;
}

/* Good: composite only */
.grow-good {
  transition: transform 0.3s;
}
.grow-good:hover {
  transform: scale(1.2);
}

The will-change Property

The will-change property hints to the browser that an element will be animated, allowing it to optimize in advance.

CSS

.will-animate {
  will-change: transform, opacity;
}

/* Apply on interaction, not constantly */
.button {
  transition: transform 0.2s;
}

.button:hover {
  will-change: transform;
}

.button:active {
  transform: scale(0.95);
}

will-change Best Practices

CSS

/* DON'T: Apply to everything */
* {
  will-change: transform; /* Wastes memory */
}

/* DON'T: Apply statically when not needed */
.static-element {
  will-change: transform; /* Only if actually animating */
}

/* DO: Apply just before animation */
.card {
  transition: transform 0.3s;
}

.card:hover {
  will-change: transform;
  transform: translateY(-10px);
}

/* DO: Remove when animation is done (via JS) */
.animated {
  will-change: transform;
  animation: slide 0.5s forwards;
}

JavaScript Control of will-change

JavaScript

// Add before animation
element.style.willChange = 'transform';

// Remove after animation
element.addEventListener('animationend', () => {
  element.style.willChange = 'auto';
});

Forcing GPU Acceleration

Sometimes you need to force an element onto its own GPU layer:

CSS

/* Creates a new compositing layer */
.gpu-layer {
  transform: translateZ(0);
  /* or */
  will-change: transform;
  /* or */
  backface-visibility: hidden;
}

Reducing Paint Areas

Isolate Animated Elements

CSS

/* Put animated elements in their own layer */
.animated-element {
  will-change: transform;
  /* Browser can repaint just this layer */
}

Use contain Property

CSS

.isolated {
  contain: layout paint;
  /* Changes inside won't affect outside layout/paint */
}

/* Stricter containment */
.strict-contain {
  contain: strict;
  /* size + layout + paint + style */
}

Animation Timing Optimization

Use requestAnimationFrame Timing

CSS animations automatically sync with requestAnimationFrame. But for JS-triggered animations, ensure you're using RAF:

JavaScript

// Sync CSS class changes with paint
requestAnimationFrame(() => {
  element.classList.add('animate');
});

Avoid Long-Running Animations

CSS

/* Keep animations short */
.quick {
  animation: bounce 0.3s ease-out;
}

/* Long animations should be interruptible */
.long-animation {
  animation: slow-move 10s linear;
  animation-play-state: running;
}

.long-animation:hover {
  animation-play-state: paused;
}

Reducing Animation Complexity

Simplify Keyframes

CSS

/* Complex: many keyframes */
@keyframes complex {
  0% { transform: translateX(0) rotate(0) scale(1); }
  25% { transform: translateX(25px) rotate(90deg) scale(1.1); }
  50% { transform: translateX(50px) rotate(180deg) scale(1); }
  75% { transform: translateX(75px) rotate(270deg) scale(0.9); }
  100% { transform: translateX(100px) rotate(360deg) scale(1); }
}

/* Simpler: browser interpolates smoothly */
@keyframes simple {
  from { transform: translateX(0) rotate(0); }
  to { transform: translateX(100px) rotate(360deg); }
}

Use Hardware-Accelerated Properties Only

CSS

/* Instead of animating multiple properties */
.complex-hover {
  transition: all 0.3s;
  /* Animates everything - expensive */
}

/* Be specific with performant properties */
.optimized-hover {
  transition: transform 0.3s, opacity 0.3s;
}

Debugging Animation Performance

Chrome DevTools

1. Open Performance panel

2. Record during animation

3. Look for long frames (over 16.67ms)

4. Check for layout/paint events during animation

Rendering Panel

Enable "Paint flashing" and "Layer borders" to see:

Green flashes: areas being repainted
Orange borders: composited layers

Mobile Considerations

CSS

/* Reduce complexity on mobile */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Simpler animations for touch devices */
@media (hover: none) {
  .card {
    /* Skip hover animations entirely */
    transform: none;
  }
}

Summary

Smooth CSS animations require understanding the rendering pipeline. Stick to transform and opacity for best performance—they're GPU-accelerated and don't trigger layout. Use will-change sparingly as a hint to the browser. Avoid animating layout-triggering properties like width, height, and position. Test animations on lower-powered devices and respect user preferences for reduced motion. With these techniques, you can create buttery-smooth 60fps animations that enhance rather than hinder user experience.