How does animation differ from a transition?

CSSJunior~1 min read

The core difference:

Transition	Animation
Works only between two states	Can have many intermediate keyframes
Triggered by an event (e.g. hover, focus)	Can start on its own, without an event
Controlled by the `transition` property	Controlled by `@keyframes` + `animation`
Simple and short-lived	Complex, cyclic, multi-stage

When you need to smoothly change one state into another, for example:

css

.box {
  transition: opacity 0.3s;
}
.box:hover {
  opacity: 0.5;
}

When you need a full-fledged animation, for example:

css

@keyframes spin {
  to { transform: rotate(360deg); }
}
.box {
  animation: spin 2s linear infinite;
}

Transition - for a simple, smooth change between two states. Animation - for complex, cyclic, multi-stage animation effects.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.