CSS Academy · Lesson

Performance: Transformable vs Repainting Props

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

Performance: Transformable vs Repainting Props is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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

Paint-Triggering Properties

These skip layout but repaint pixels. Moderately expensive:

background-color
color
box-shadow
border

Composite-Only Properties

These skip both layout and paint — the browser only needs to composite pre-rasterized layers. Very cheap, GPU-accelerated:

transform
opacity

Golden Rule of CSS Animation

For smooth 60fps animations, animate only transform and opacity. Use transform: translate() instead of top/left, and opacity instead of display fades.

/* SLOW: triggers layout */
.box:hover { left: 10px; }

/* FAST: compositor only */
.box:hover { transform: translateX(10px); }

will-change Property

will-change tells the browser to promote an element to its own GPU layer before animation starts, preventing a "promotion flash" mid-animation.

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

will-change: auto

Set will-change: auto or remove the property entirely after animations are done. Keeping too many elements promoted wastes GPU memory.

Measuring with DevTools

Use Chrome DevTools Performance tab to record and inspect frame timing. The Rendering tab can paint flashing (green overlay) showing which elements repaint each frame.

transform Instead of top/left

The most impactful optimization: replace positional animations with transform:

/* Layout thrash: AVOID */
.fly:hover { top: -20px; transition: top 300ms; }

/* Composite: PREFER */
.fly:hover { transform: translateY(-20px); transition: transform 300ms; }

Color Transition Cost

Background color transitions trigger repaint but not layout. They are acceptable for small elements. For large backgrounds, consider using a pseudo-element with opacity transition instead:

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: royalblue;
  opacity: 0;
  transition: opacity 200ms; /* composite */
}

.btn:hover::after { opacity: 1; }

contain Property

The contain property hints to the browser that an element and its subtree are independent. This limits layout invalidation scope, improving repaint performance.

.widget {
  contain: layout paint;
}

Quick Check

Which two CSS properties can be animated at the composite stage without triggering layout or paint?

Recap

Animating layout properties (width, top, margin) triggers expensive recalculations. Paint properties (color, background) are cheaper. Only transform and opacity animate at the GPU composite stage without triggering layout or paint. Always prefer these for smooth, performant animations.

Frequently asked questions

Is the “Performance: Transformable vs Repainting Props” lesson free?

Yes — the full text of “Performance: Transformable vs Repainting Props” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Performance: Transformable vs Repainting Props”?

Learn which properties are GPU-accelerated and which trigger expensive layout repaints. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Performance: Transformable vs Repainting Props” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Transition Property Duration and Timing
Easing Functions: ease linear cubic-bezier
Transitioning Multiple Properties
Performance: Transformable vs Repainting Props

← Back to CSS Academy