0Pricing
CSS Academy · Lesson

Performance: Transformable vs Repainting Props

Learn which properties are GPU-accelerated and which trigger expensive layout repaints.

The Rendering Pipeline

Browsers render in three stages: Layout (size + position) → Paint (pixels) → Composite (GPU layer merging). Animating properties that trigger earlier stages is expensive.

Layout-Triggering Properties

Changing these properties forces the browser to recalculate layout for potentially the entire page. Avoid animating them:

  • width, height
  • margin, padding
  • top, left
  • font-size
  • display

All lessons in this course

  1. Transition Property Duration and Timing
  2. Easing Functions: ease linear cubic-bezier
  3. Transitioning Multiple Properties
  4. Performance: Transformable vs Repainting Props
← Back to CSS Academy