CSS Animations & Keyframes

1. Keyframes + animation

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}
.dot {
  animation: bounce 0.9s ease-in-out infinite;
  /*         name   duration timing    loops */
}

Keyframes are percentage waypoints through one cycle; the browser interpolates between them. The shorthand also accepts a delay, alternate (ping-pong direction), and animation-fill-mode: forwards to hold the final frame — essential for one-shot entrances.

2. Entrances, stagger, and restraint

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeUp .5s ease-out both; }
.card:nth-child(2) { animation-delay: .1s; }
.card:nth-child(3) { animation-delay: .2s; }

from/to is shorthand for 0%/100%. Staggered delays turn a grid load into a cascade — the home page tool cards do exactly this. Two rules of taste: animate transform/opacity for smoothness, and always respect prefers-reduced-motion.

3. Try it yourself

Write a @keyframes pulse that scales the circle from 1 to 1.25 at 50% and back, then run it: animation: pulse 1.2s ease-in-out infinite.

4. Quiz — check your understanding