Keyframes and Animation

Use keyframes when motion needs intermediate steps instead of only a start and end state.

A three-step entrance

Lesson ready

The card fades and translates through named keyframe stages.

animation: arrive 900ms ease-out both;

Build an animation in two parts

  1. Declare intermediate styles inside @keyframes arrive.
  2. Attach them with an animation name and a duration.
  3. Add timing, delay, repetition, direction, or fill behavior only when the motion needs it.

The visible text communicates the ready state even if animation is unavailable.

Respect reduced-motion preferences

This lesson removes nonessential animation when the operating system requests reduced motion:

@media (prefers-reduced-motion: reduce) { ... }

Reduced motion is not the same as no design. Keep the final state clear while removing unnecessary movement.

Important CSS

Keyframes name multi-step motion; animation applies them.

@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.badge {
  animation: pulse 1.2s ease-in-out infinite alternate;
}