Answer
Transitions react to a computed-value change, while animations run a keyframed timeline. • A transition normally needs a state change such as hover or a class update. • An animation can start automatically and use many keyframes. • Both should respect prefers-reduced-motion when movement is non-essential.
💡 Simple Example
.card { transition: transform .2s; }
.loader { animation: spin 1s linear infinite; }
⚡ Quick Revision
Transitions connect two states; animations can run multi-step timelines.