Skip to content
FrontendHaltFrontendHalt
CSS·Intermediate·Coding·1 min read

When is transition the right tool instead of animation?

Short interview answer

Use transition when a property moves between two states caused by something else changing, such as a class toggle or hover. Use animation when you need an explicit multi-step sequence, looping, or motion that starts without a discrete state change.

Example

CSS
/* transition — reacts to a state change */.panel { opacity: 0; transition: opacity 200ms ease; }.panel.open { opacity: 1; }
/* animation — self-starting, multi-step */@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }.badge { animation: pulse 1.5s infinite; }

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to CSS animations and transitions

Related questions