Which statement best differentiates CSS transitions from animations?

• A. Animations use keyframes and can loop.
• B. Transitions animate between two states; animations use keyframes and can loop.
• C. Transitions require JavaScript.
• D. Both are identical.

Answer: (B)

CSS transitions are all about smoothly moving from one value to another when a property changes. You define a start state and an end state, and the browser interpolates between them over a set duration, usually in response to something like a hover or a class being added. They don’t run on their own or loop; they simply animate the change that’s triggered.

CSS animations, by contrast, are driven by keyframes. You lay out a sequence of steps at various points (like 0%, 50%, 100%), and the animation can run repeatedly, including infinite looping, without needing another state change to re-trigger it.

So the statement that transitions animate between two states and animations use keyframes and can loop captures the practical difference between the two: transitions handle a single state change smoothly, while animations define a repeating sequence of steps via keyframes.