CSS Animation Performance Tips
Optimize CSS animations for 60fps — using transform, opacity, will-change, and avoiding layout thrashing.
Published:
Tags: CSS animation performance, CSS 60fps animation, GPU-accelerated CSS
CSS Animation Performance Tips CSS animations are powerful but can easily cause frame drops if they trigger layout recalculations or excessive paint operations on every frame. The rendering pipeline explains why: the browser must complete style calculation → layout → paint → compositing before each frame renders. Animations that touch and skip layout and paint, running at 60fps on the GPU. Animations that change , , or can force the full pipeline on every 16ms frame. --- What is The Browser Rendering Pipeline? Understanding which pipeline stages each CSS property triggers is the foundation of animation performance: | Pipeline stage | Triggered by | Cost | |---|---|---| | Style calculation | Any property change | Low | | Layout | , , , , , , , and ~50 other properties | High | | Paint | ,…
Frequently Asked Questions
How do I make CSS animations run at 60fps?
Animate only `transform` and `opacity` whenever possible. These properties are composited by the GPU without triggering layout or paint. Avoid animating `width`, `height`, `top`, `left`, `margin`, or `padding`, as these cause layout recalculations on every frame.
What CSS properties can the GPU accelerate?
The GPU can composite `transform` (translate, rotate, scale, skew) and `opacity` without triggering layout or paint. `filter` (blur, brightness, etc.) is also GPU-composited in modern browsers. All other properties trigger the full browser rendering pipeline: style → layout → paint → composite.
What is will-change in CSS?
`will-change` hints to the browser that a property will animate soon, allowing it to pre-allocate GPU resources and create a new compositor layer. Use `will-change: transform` or `will-change: opacity`. Apply it sparingly — every element with `will-change` consumes GPU memory. Remove it after animation completes.
How do I avoid CSS layout thrashing?
Layout thrashing occurs when JavaScript reads layout properties (offsetWidth, getBoundingClientRect) and then writes CSS properties in rapid alternation, forcing repeated layout recalculations. Batch reads together before writes, use `requestAnimationFrame` for write operations, and prefer CSS transitions/animations over JS-driven style updates.
What is the FLIP animation technique?
FLIP stands for First, Last, Invert, Play. Record the element's initial position (First), move it to the final position (Last), apply an inverse transform to snap it back visually (Invert), then animate the transform to zero (Play). This lets you animate elements to/from calculated layout positions using only GPU-composited transform.
All articles · theproductguy.in