CSS Animations and Transitions: Smooth Motion Without JavaScript

Transitions animate between two states (hover on/off). Animations run a sequence of keyframes you define. Same engine under the hood — different tools for different jobs.

Transitions in 60 seconds

.btn {
  background: #3b82f6;
  transition: background 200ms ease, transform 200ms ease;
}
.btn:hover { background: #2563eb; transform: translateY(-2px); }

Animations with @keyframes

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeInUp 300ms ease-out both; }

Animate only cheap properties

• ✅ transform — moves on the GPU
• ✅ opacity — composited
• ⚠️ background-color — fine for small areas
• ❌ width / height / top / left — triggers layout

Easing curves that don't feel robotic

• ease-out — UI entrances feel snappy
• ease-in — exits and dismissals
• cubic-bezier(0.16, 1, 0.3, 1) — modern 'spring' feel

Respect prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Common mistakes

• Animating non-transform properties
• Using too-long durations (200–300ms is plenty)
• Forgetting reduced-motion users
• Stacking multiple animations on the same element