Custom keyframe animations in Tailwind - Performance & Optimization

Performance: Custom keyframe animations

MEDIUM IMPACT

Custom keyframe animations affect the browser's paint and composite stages, impacting visual smoothness and interaction responsiveness.

Animating an element smoothly without causing layout shifts or jank

Tailwind

@keyframes smoothTransform {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
.animate-transform {
  animation: smoothTransform 2s infinite;
  will-change: transform;
}

Animating transform uses the GPU for compositing, avoiding layout recalculations and keeping animation smooth.

📈 Performance Gaintriggers 0 reflows, only compositing, resulting in smooth 60fps animation

Animating an element smoothly without causing layout shifts or jank

Tailwind

@keyframes slowLayoutShift {
  0% { width: 100px; }
  100% { width: 200px; }
}
.animate-width {
  animation: slowLayoutShift 2s infinite;
}

Animating width triggers layout recalculations and reflows on every frame, causing jank and high CPU usage.

📉 Performance Costtriggers 1 reflow per animation frame, causing jank and increased CPU load

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Animating width	None	1 per frame	High (layout + paint)	[X] Bad
Animating transform	None	0	Low (composite only)	[OK] Good

Rendering Pipeline

Custom keyframe animations update CSS properties each frame. Properties like width cause Style Calculation, Layout, Paint, and Composite stages. GPU-accelerated properties like transform skip Layout and Paint, going directly to Composite.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages are most expensive when animating layout-affecting properties.

Core Web Vital Affected

INP

Custom keyframe animations affect the browser's paint and composite stages, impacting visual smoothness and interaction responsiveness.

Optimization Tips

1Animate only transform and opacity for best performance.

2Avoid animating layout-affecting properties like width or height.

3Use 'will-change' to hint the browser for GPU acceleration.

Performance Quiz - 3 Questions

Which CSS property is best to animate for smooth performance?

A width

B transform

C margin

D height

DevTools: Performance

How to check: Record a performance profile while the animation runs. Look for Layout and Paint events during animation frames.

What to look for: High Layout or Paint times indicate costly animations; smooth animations show mostly Composite events.