CSS gives designers two complementary tools for motion on the web: transitions and animations. A transition is designed to animate smoothly between two states of a property when that property changes, interpolating intermediate values over time. An animation, by contrast, animates an element through multiple keyframes over time, supports loops and complex multi-step sequences, and runs automatically without requiring any state change to trigger it. In short, transitions react to changes, while animations drive a timeline on their own.
This distinction shapes when you reach for each tool. A transition needs an event — typically a pseudo-class like :hover or :focus, a class change, or a JavaScript style update — to begin, and it runs once between the old and new values. An animation can be defined declaratively with @keyframes and will play on its own schedule, optionally looping forever. The two can be combined: an animation may itself be paused or replayed by toggling a class, but the animation is not strictly dependent on that toggle to function.
It is also important not to confuse transition with transform. The transform property changes an element's geometry using functions like translate, rotate, and scale; transition is the mechanism that animates any animatable property when its value changes. Transforms are commonly the things being transitioned or animated, but transition itself does not move things — it animates changes.