CSS Animations for Beginners — Transitions to Keyframes

Animation is the difference between a static page and a polished product. Two tools: transitions (A→B on state change) and keyframes (multi-step, looping).

Transitions — 90% of what you need

.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

Keyframes — loops and sequences

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.dot { animation: pulse 1.5s ease-in-out infinite; }

The performance rule

Animate only transform and opacity — the GPU handles them without recalculating layout. Animating width, height or top causes stutter on cheap phones (most of your users).

Respect user settings

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

Try these live in the Playground.