Transitions, animations, and motion

A transition animates a property change:

.button {
  transition: transform 150ms ease, background-color 150ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

List the properties deliberately. transition: all can animate a later layout or visibility change that was never designed for motion.

Keyframes describe multi-step or repeating motion:

@keyframes spin {
  to { transform: rotate(1turn); }
}

transform and opacity often avoid layout work and are good first choices, though the browser decides how they are composited. Animating dimensions or position can cause layout and paint on every frame. Confirm with the Performance panel when motion is substantial.

Motion should explain state, not delay interaction. Large scaling, panning, parallax, and continuous animation can trigger discomfort. Never make animation the only signal that something changed.

Respect the user’s preference:

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: background-color 0s;
  }

  .progress-animation {
    animation: none;
  }
}

reduce asks you to remove, reduce, or replace non-essential motion. A targeted alternative is safer than a universal rule that can break functional animation events or component assumptions.

Emulate reduced motion in DevTools and navigate entirely by keyboard. Verify state changes remain clear with motion removed, then record a performance trace to see whether the normal version triggers layout or paint on each frame.