DEV Community

Cover image for CSS Animation Performance - CheatSheet
Pratik sharma
Pratik sharma Subscriber

Posted on • Originally published at blog.coolhead.in

CSS Animation Performance - CheatSheet

#webdev #css #javascript #programming

Here’s a comprehensive table of CSS properties categorized by their impact on browser rendering performance, specifically focusing on Layout, Paint, and Composite:

  • Layout: Calculate the size and position of elements on the page.

  • Paint: Draw the page into graphical layers - essentially individual images that make up the page.

  • Composite: Draw these layers to the viewport.

Properties clip-path, opacity , transform, z-index, visibility, filter , are best for performing web animations

CSS Property Layout Paint Composite Notes
width, height ✅ ❌ ❌ Affects element and child layout
margin, padding ✅ ❌ ❌ Triggers layout changes
border ❌ ✅ ❌ Repaints element boundary
box-shadow ❌ ✅ ❌ Complex paints for shadows
top, left, right, bottom ✅ ❌ ❌ Reflows and triggers layout
position ✅ ❌ ❌ Changes element's positioning model
display ✅ ❌ ❌ Can remove or reflow elements entirely
color, background-color ❌ ✅ ❌ Simple paint update
background-image ❌ ✅ ❌ Complex paint updates
transform ❌ ❌ ✅ GPU accelerated; efficient compositing
opacity ❌ ❌ ✅ Composited efficiently
z-index ❌ ❌ ✅ Layer stacking order
visibility ❌ ❌ ✅ Affects visibility without layout
overflow ✅ ❌ ❌ Layout affected by scrollbars
clip-path ❌ ❌ ✅ Efficient compositing
border-radius ❌ ✅ ❌ Paint complexity increases
filter ❌ ❌ ✅ GPU optimized for modern browsers
box-sizing ✅ ❌ ❌ Changes size calculations
font-size, font-family ✅ ✅ ❌ Relayout and repaint text
line-height, letter-spacing ✅ ✅ ❌ Text rendering changes

Legend:

  • ✅: Triggers the specified phase

  • ❌: Does not trigger the phase

Performance Tip:

  • Prefer transform and opacity changes for animations instead of properties like top, left, or width to avoid costly layout recalculations.

  • Reduce unnecessary paints and layout reflows by using GPU-accelerated properties (transform, opacity).

  • transform and opacity are cheapest to render in all browsers. Browsers are improving the rendering performance of other styles (and SVG) all the time, with filter, background-color and clip-path on the horizon.

How to use Will-change ?

The will-change css property hints to browsers how an element is expected to change. Browsers may set up optimisations before an element is actually changed.

/* Keyword values */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* Example of <custom-ident> */
will-change: opacity; /* Example of <custom-ident> */
will-change: left, top; /* Example of two <animatable-feature> */

/* Global values */
will-change: inherit;
will-change: initial;
will-change: revert;
will-change: revert-layer;
will-change: unset;
CSS Animation Performance - CheatSheet - DEV CommunityNavigation menuSearchSearchCloseMore...Copy linkEnter fullscreen modeExit fullscreen modeEnter fullscreen modeExit fullscreen modeEnter fullscreen modeExit fullscreen mode - dev.to CSS Animation Performance - CheatSheet - DEV CommunityNavigation menuSearchSearchCloseMore...Copy linkEnter fullscreen modeExit fullscreen modeEnter fullscreen modeExit fullscreen modeEnter fullscreen modeExit fullscreen mode - dev.to

You can hint to the browser that they should create a new layer by setting the willChange style to "transform":

element.style.willChange = "transform"
CSS Animation Performance - CheatSheet - DEV CommunityNavigation menuSearchSearchCloseMore...Copy linkEnter fullscreen modeExit fullscreen modeEnter fullscreen modeExit fullscreen modeEnter fullscreen modeExit fullscreen mode - dev.to CSS Animation Performance - CheatSheet - DEV CommunityNavigation menuSearchSearchCloseMore...Copy linkEnter fullscreen modeExit fullscreen modeEnter fullscreen modeExit fullscreen modeEnter fullscreen modeExit fullscreen mode - dev.to

Instead of animating boxShadow, animate filter with the drop-shadow function:

// ❌

#box:hover { boxShadow: "10px 10px black" };

// ✅

#box:hover { filter: "drop-shadow(10px 10px black)" };
CSS Animation Performance - CheatSheet - DEV CommunityNavigation menuSearchSearchCloseMore...Copy linkEnter fullscreen modeExit fullscreen modeEnter fullscreen modeExit fullscreen modeEnter fullscreen modeExit fullscreen mode - dev.to CSS Animation Performance - CheatSheet - DEV CommunityNavigation menuSearchSearchCloseMore...Copy linkEnter fullscreen modeExit fullscreen modeEnter fullscreen modeExit fullscreen modeEnter fullscreen modeExit fullscreen mode - dev.to

Browser Rendering :

1. Layout (Reflow)

Definition:

The layout phase calculates the position and size of elements in the document based on the CSS and DOM structure.

When It's Triggered:

  • Adding, removing, or changing the size/position of elements (width, height, margin, padding, etc.).

  • Resizing the window or changing the font size.

Performance Impact:

  • Expensive, as it affects the entire document or subtree of elements.

  • Causes reflow for child elements when dimensions change.

2. Paint (Repaint)

Definition:

The paint phase involves filling in pixels for visual elements, such as colors, borders, text, and shadows.

When It's Triggered:

  • Changes to visual properties that don’t affect the layout (color, background-color, border, box-shadow).

Performance Impact:

  • Moderate cost as it redraws only the visual parts of elements but doesn't impact the layout.

3. Composite (Layer Composition)

Definition:

The composite phase involves assembling the different painted layers on the GPU to display the final image on the screen.

When It's Triggered:

  • GPU-accelerated properties such as transform, opacity, and filter.

Performance Impact:

  • Least expensive as it avoids recalculating layout or repainting.

  • Efficiently handled by the GPU for smoother animations.

Summary Table

Phase Triggered By Performance Impact
Layout Size and position changes High
Paint Visual appearance changes Moderate
Composite GPU-based transforms and effects Low

Further Read:

  1. https://developer.chrome.com/blog/inside-browser-part3

Reference:

  1. https://motion.dev/docs/performance

  2. https://motion.dev/blog/do-you-still-need-framer-motion

  3. https://developer.chrome.com/blog/inside-browser-part3

Top comments (0)