Animations

Overview

Animations use @keyframes to define intermediate states, letting an element move through multiple values over time without a triggering state change. Unlike transitions, they can loop, alternate direction, and run on load. The animation shorthand ties a keyframe set to a duration, timing, and iteration behavior.

Syntax / Usage

Define named keyframes with percentage or from/to steps, then reference them via the animation shorthand: name, duration, timing function, delay, iteration count, direction, and fill mode.

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

Examples

A pulsing call-to-action that eases in and out forever:

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.cta {
  animation: pulse 1.5s ease-in-out infinite;
}

A one-time entrance that keeps its final state with forwards:

@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel {
  animation: slide-up 400ms ease-out forwards;
}

Pausing animation for users who prefer reduced motion:

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

Common Mistakes

• Omitting animation-fill-mode: forwards, so the element snaps back after finishing
• Animating layout properties like width instead of transform, causing jank
• Forgetting infinite, so a looping animation runs only once
• Naming collisions between multiple @keyframes blocks with the same identifier
• Not honoring prefers-reduced-motion, hurting accessibility

See Also

css-transitions css-transforms custom-properties