Bounce animation (attention) in Tailwind - Performance & Optimization

Performance: Bounce animation (attention)

MEDIUM IMPACT

Bounce animations affect the visual stability and interaction responsiveness by triggering repaints and potentially layout shifts.

Creating a bounce animation to draw user attention

Tailwind

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(20px); }
}
.element {
  animation: bounce 1s infinite;
  will-change: transform;
}

Animating 'transform' uses the compositor thread, avoiding layout recalculations and reducing main thread work.

📈 Performance GainNo reflows triggered, smooth animation with GPU acceleration.

Creating a bounce animation to draw user attention

Tailwind

@keyframes bounce {
  0%, 100% { top: 0; }
  50% { top: 20px; }
}
.element {
  position: relative;
  animation: bounce 1s infinite;
}

Animating the 'top' property causes layout recalculations and triggers reflows, which slows down rendering.

📉 Performance CostTriggers 1 reflow per animation frame, causing jank and increased CPU usage.

Performance Comparison

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

Rendering Pipeline

Animating layout properties like 'top' forces the browser to recalculate layout and repaint, blocking the main thread. Animating 'transform' bypasses layout and paint stages by using the compositor, resulting in smoother animations.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout recalculation is the most expensive when animating position properties.

Core Web Vital Affected

CLS

Bounce animations affect the visual stability and interaction responsiveness by triggering repaints and potentially layout shifts.

Optimization Tips

1Always animate 'transform' or 'opacity' for best performance.

2Avoid animating layout properties like 'top', 'left', 'width', or 'height'.

3Use 'will-change' to hint the browser about upcoming animations.

Performance Quiz - 3 Questions

Which CSS property is best to animate for smooth bounce animations?

A transform

B top

C width

D margin

DevTools: Performance

How to check: Record a performance profile while the bounce animation runs. Look for layout and paint events during animation frames.

What to look for: High frequency of layout recalculations and paint events indicates poor animation performance; absence means good use of compositor.