CSS Animation Performance: What Triggers Layout, Paint, and Composite

CSS Animation Performance: What Triggers Layout, Paint, and Composite | DevPrep

/* Bad: animating width triggers layout on every frame */
.expanding {
  transition: width 0.3s;
}
.expanding:hover { width: 200px; }

/* Good: use transform instead */
.expanding {
  transition: transform 0.3s;
}
.expanding:hover { transform: scaleX(1.5); }

/* Bad: animating top/left */
@keyframes slide {
  to { top: 100px; left: 100px; }
}

/* Good: use translate */
@keyframes slide {
  to { transform: translate(100px, 100px); }
}

/* Promotes to own compositor layer */
.animated-element {
  will-change: transform, opacity;
}

/* Remove after animation */
.animated-element.done {
  will-change: auto;
}

/* Don't overuse! Each layer costs GPU memory */
/* Bad: */
* { will-change: transform; }

// Always use rAF for JS animations
function animate() {
  element.style.transform = `translateX(${x}px)`;
  x += speed;
  if (x < target) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

// Never use setInterval for visual updates!

CSS Animation Performance: What Triggers Layout, Paint, and Composite

Related Articles

System Design #12: Design a Multi-Step Form Wizard

Mastering Senior-Level JavaScript Interview Concepts

System Design #9: Design a Collaborative Text Editor

Comments (0)

The Three Layers

Layout Properties (Most Expensive)

Paint Properties (Medium)

Composite Properties (Cheapest)

Practical Examples

will-change: The Performance Hint

requestAnimationFrame

Measuring Performance