The Art of CSS Animations: Beyond the Basics

Why CSS animations?

JavaScript animation libraries are powerful, but CSS animations have a secret superpower: they can be composited on the GPU, running at 60fps without touching the main thread.

The golden rules

1. Only animate transform and opacity — these are the only properties that can be GPU-composited
2. Use will-change sparingly — it’s a hint, not a magic wand
3. Respect prefers-reduced-motion — always provide a reduced-motion alternative

A practical example

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.floating-element {
  animation: float 3s ease-in-out infinite;
}

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

Performance tips

• Avoid animating width, height, top, left — use transform instead
• Use animation-fill-mode: both to prevent layout shift at start/end
• Test on low-end devices — what feels smooth on your M-series Mac might chug on an older phone

The key is restraint. A few well-placed animations create delight; too many create chaos.