How do CSS transitions and animations differ, and when do you use each?
Understand how CSS transitions and animations differ, when to use each, and how keyframes, looping, and triggers work — with practical code examples.
Expected Interview Answer
CSS transitions animate a property from one state to another in response to a trigger (like :hover or a class change), running once from start to end. CSS animations use @keyframes to define multiple intermediate steps and can run automatically, loop, alternate, and play without any state change or user interaction.
A transition needs two states and something to switch between them — it interpolates between the current value and a new value. An animation is self-contained: the @keyframes rule describes the whole sequence (0% to 100%, or named percentages) and properties like animation-iteration-count, animation-direction, and animation-delay control how it plays. Use transitions for simple, reactive state changes such as hover effects or toggling classes; use animations for complex, multi-step, looping, or autonomous motion like spinners, pulses, and entrance sequences.
- Transitions are simple for two-state hover/toggle effects
- Animations support multiple keyframe steps and looping
- Animations can run automatically without a trigger
- animation-direction enables alternating/reverse playback
- Both are GPU-friendly for transform and opacity
- Keyframes give fine-grained control over timing at each step
AI Mentor Explanation
A transition is a single delivery: the bowler runs in and the ball travels from hand to bat once, triggered by the umpire's signal. An animation is a scripted training drill — a fixed sequence of run-up, jump, throw, and follow-through that a coach can loop over and over, mirror in reverse, and start on a timer without waiting for any match situation.
Step-by-Step Explanation
Step 1
Identify the trigger
If motion should start from a state change (hover, focus, added class), a transition fits. If it should run on its own, use an animation.
Step 2
Count the steps
Two states (from/to) means a transition. Multiple intermediate steps means @keyframes and an animation.
Step 3
Decide on repetition
Looping, alternating, or infinite motion requires animation-iteration-count and animation-direction — transitions run once.
Step 4
Write the rule
For transitions, set transition on the base element and change the property on :hover. For animations, define @keyframes and reference it with animation.
Step 5
Optimize for performance
Animate transform and opacity where possible to stay on the compositor and avoid layout/paint thrash.
What Interviewer Expects
- Transitions need a state change; animations do not
- Understanding of @keyframes and multi-step sequences
- Knowledge of iteration-count, direction, and delay
- Correct use case selection (hover vs spinner/loop)
- Awareness of GPU-friendly properties (transform, opacity)
Common Mistakes
- Thinking transitions can define intermediate keyframe steps
- Believing animations always require a hover or trigger
- Forgetting to set an initial value so a transition has something to interpolate from
- Animating layout properties like width/top instead of transform
- Omitting animation-fill-mode and being surprised the element snaps back
Best Answer (HR Friendly)
“A CSS transition smoothly changes a style from one state to another when something happens, like hovering a button. A CSS animation is more powerful: you script a whole sequence of steps with keyframes, and it can play automatically, loop, and reverse without any interaction. You reach for transitions for simple hover effects and animations for things like spinners or looping motion.”
Code Example
.button {
background: #2563eb;
transition: background 0.3s ease, transform 0.3s ease;
}
.button:hover {
background: #1e40af;
transform: translateY(-2px);
}@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.6; }
}
.badge {
animation: pulse 2s ease-in-out infinite alternate;
}Follow-up Questions
- What does animation-fill-mode do and when is 'forwards' needed?
- How do animation-direction: alternate and iteration-count interact?
- Why are transform and opacity preferred for smooth animation?
- Can you pause a CSS animation, and how?
- How does prefers-reduced-motion change your animation strategy?
MCQ Practice
1. Which feature is unique to CSS animations and not possible with transitions?
Only @keyframes-based animations can define multiple intermediate steps; transitions interpolate only between a start and end value.
2. You need a loading spinner that rotates forever with no user interaction. What do you use?
A looping, self-running spinner needs @keyframes plus animation-iteration-count: infinite, since transitions require a state change and run once.
3. What is required for a CSS transition to actually animate?
A transition interpolates between a starting value and a new value, so it needs a property change (e.g., via :hover or a class) to trigger.
Flash Cards
CSS transition — Animates a property between two states in response to a trigger; runs once, no intermediate steps.
CSS animation — Uses @keyframes to define multi-step sequences; can auto-play, loop, alternate, and delay without a trigger.
When to use a transition — Simple reactive effects: hover, focus, or toggling a class between two states.
When to use an animation — Complex, looping, or autonomous motion: spinners, pulses, entrance sequences.
GPU-friendly properties — Animate transform and opacity to stay on the compositor and avoid reflow/repaint.
Continue Learning
Related Interview Questions
What is the difference between visibility hidden, display none, and opacity zero?
easy
What Is the Difference Between CSS Transitions and CSS Animations?
medium
What is the CSS box model and how do content, padding, border, and margin interact?
easy
What is the difference between the CSS box-sizing values content-box and border-box?
medium