Transitions and animations

Transitions

A transition tells the browser: when this property changes, do not jump; move smoothly over some time. You write it on the normal state, and it works both ways (in and out).

.btn {
  background: #2563eb;
  transition: background-color 200ms ease, transform 200ms ease;
}
.btn:hover,
.btn:focus-visible {
  background: #1d4ed8;
  transform: translateY(-2px);
}

The parts are: which property, how long (200ms is a good default for small changes), and the easing (how speed changes: ease, ease-out, linear).

Transforms

Keyframe animations

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

@keyframes describes the steps of an animation (from/to, or percentages like 0%, 50%, 100%). The animation property connects it to an element with a name, a duration, an easing and how many times to repeat.

Smooth and kind motion

• Animate transform and opacity: the browser can move them without recalculating the layout, so they stay smooth even on cheap phones.
• Avoid animating width, height, top or left on big elements; they cause jank (stuttering).
• Keep UI motion short: 150 to 300ms for most changes.
• Motion should explain something (where a menu came from), not just decorate.

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