Skip to main content

Animate with transform and opacity instead of layout properties

Use CSS transform and opacity for animations instead of layout properties like top, left, right, or bottom, to avoid triggering layout recalculation and CLS on every frame.

Anchor to WhyWhy

Animating layout properties is an anti-pattern. The browser treats every frame of the animation as a layout shift. This causes massive CLS scores, janky animations and laggy scrolls because the browser must recalculate layout on every frame, poor INP because this work happens on the main thread, and animations aren't hardware-accelerated.

For performant animations, animate only two properties: transform and opacity. The browser's compositor thread handles these properties, and they don't trigger layout or paint operations. Benefits: no layout shifts (CLS of 0), hardware acceleration for smooth animations, and a free main thread for better INP and scrolling performance.

Anchor to HowHow

Instead of animating layout properties, use transform:

/* Anti-pattern: creates a layout shift on every frame */
@keyframes slideUp {
from {
bottom: -100%;
}
to {
bottom: 0;
}
}

/* Recommended: hardware-accelerated, no layout shift */
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}

Always disable animations for users who prefer reduced motion:

@media (prefers-reduced-motion: reduce) {
.animated-element {
animation: none;
transition: none;
}
}

Anchor to ExamplesExamples

Anchor to Cookie bannersCookie banners

Cookie consent banners often animate using position properties. Although they don't visibly shift content when they slide in from the bottom, they still register as layout shift because they use position properties. Fix this by changing to a transform-based animation.

Anchor to Dialog animationsDialog animations

.modal {
animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}

@media (prefers-reduced-motion: reduce) {
.modal {
animation: none;
}
}

Anchor to TestingTesting

  • The Chrome DevTools Performance panel shows animation-based layout shifts. Record during an animation and look for Layout Shift entries in the Layout Shifts track.
  • Use the Rendering tab, available in the More tools menu, to enable Layout Shift Regions for visual feedback.
  • Use the Animations tab in the drawer to debug and slow down animations and visualize their impact.
  • Visually observe during an animation.
  • Compare CLS scores before and after.

Anchor to ReferencesReferences

Was this page helpful?