Transitions: The Simplest Animation

A transition does not animate forever on its own. It only runs when an element changes from one state to another. That state change might come from :hover, :focus, :active, a class being added, or some other CSS change.

Without a transition, the browser jumps instantly from old values to new values. With a transition, the browser fills in the in-between frames for you. This is why transitions are the best place to start with animation: you already understand state changes from normal CSS. Transitions just make the change smooth instead of abrupt.