CSS transition versus animation

WHAT THIS TESTS This checks whether you understand the two CSS motion mechanisms and can match each to the right job rather than reaching for whichever you know.

A GOOD ANSWER COVERS A transition interpolates a property between two states, the before and after, and it only runs when something changes that triggers it, such as a hover, focus, or a class added by JavaScript. It is inherently two-state and one-shot per trigger. A CSS animation is defined with @keyframes, which can specify many intermediate steps at percentages from 0 to 100. Animations can start on their own when the element renders, repeat with animation-iteration-count including infinite, alternate direction, and pause. So the core difference is two-state-triggered interpolation versus multi-step, self-running, loopable motion.

COMMON WRONG ANSWERS Thinking a transition can loop; it cannot, you need an animation for repetition. Believing a transition can play automatically on page load without any state change; it requires a trigger. Treating them as fully interchangeable; a multi-step or looping effect simply cannot be expressed as a transition.

LIKELY FOLLOW-UPS Which properties are cheap to animate? transform and opacity, because they avoid layout and paint and can run on the compositor. How do you trigger a transition from JavaScript? Toggle a class or change an inline style. Can you control timing curves in both? Yes, both accept timing functions like ease and cubic-bezier. How do you respect user preferences? Honor prefers-reduced-motion by disabling or reducing both.

ONE CONCRETE EXAMPLE For a button that smoothly changes background on hover, a transition is ideal: transition: background-color 200ms ease, and the color glides whenever hover toggles the state, returning automatically on un-hover. For a loading spinner that rotates forever, you need an animation: define @keyframes spin from rotate 0 to rotate 360deg and apply animation: spin 1s linear infinite, because it must loop continuously and start without any user interaction, which a transition cannot do.