What Is the Difference Between CSS Transitions and CSS Animations?
Learn how CSS transitions differ from animations — triggers, keyframes, looping, and performance-friendly properties.
Expected Interview Answer
A CSS transition interpolates a single property smoothly between two states — a start and an end value — triggered by a state change like hover or a class toggle, while a CSS animation uses defined @keyframes to run a multi-step sequence that can repeat, reverse, and run independently without any triggering state change.
Transitions require an explicit trigger: something must change the property’s value (a :hover, a class added via JavaScript, a focus state) and the transition property then smooths the path from the old value to the new one over the specified duration and easing curve. They are inherently two-state (from/to) and cannot loop on their own. Animations, defined with @keyframes, describe an arbitrary number of intermediate steps as percentages (0%, 50%, 100%) and are attached to an element via animation-name/animation-duration; critically, they can start automatically on page load, run indefinitely with animation-iteration-count: infinite, and alternate direction, none of which transitions can do natively. Both run off the main thread when animating GPU-friendly properties like transform and opacity, but animations offer far more granular control over intermediate keyframe states, while transitions are simpler and more appropriate for straightforward state-change feedback like a button hover.
- Transitions give simple, lightweight state-change feedback (hover, focus, toggle)
- Animations support multi-step sequences via keyframes with full timeline control
- Animations can loop, reverse, and run automatically without a triggering event
- Both can leverage GPU-accelerated properties (transform, opacity) for smooth performance
AI Mentor Explanation
A CSS transition is like a fielder smoothly jogging from their current position to a new one the moment the captain signals a field change — one clear start point, one clear end point, triggered by a single event. A CSS animation is like a pre-choreographed victory lap around the boundary with multiple defined stops — raise the bat, wave to the crowd, sprint to teammates — that plays out automatically and can repeat every time a wicket falls, without needing a signal each time. That single-triggered-move versus repeating-multi-step-sequence is exactly the difference between a CSS transition and animation.
Step-by-Step Explanation
Step 1
Choose transition for simple two-state feedback
Use the transition property when a single property needs to smoothly move between exactly two states on trigger.
Step 2
Choose animation for multi-step or auto-running sequences
Define @keyframes when you need several intermediate states, looping, or autoplay without a trigger.
Step 3
Define the timing function and duration
Both use transition-timing-function/animation-timing-function to control easing (ease, linear, cubic-bezier).
Step 4
Prefer GPU-friendly properties
Animate transform and opacity rather than layout-triggering properties like width or top for smooth 60fps motion.
What Interviewer Expects
- Clear articulation that transitions are two-state and event-triggered
- Understanding that @keyframes enable multi-step, self-running animations
- Awareness that animations can loop/reverse (animation-iteration-count, animation-direction) while transitions cannot natively
- Mention of GPU-accelerated properties (transform, opacity) for performance
Common Mistakes
- Claiming transitions and animations are interchangeable in all cases
- Forgetting that transitions require an explicit trigger, unlike animations which can autoplay
- Animating layout-triggering properties (width, top, margin) instead of transform, hurting performance
- Not knowing animation-fill-mode controls state before/after the animation plays
Best Answer (HR Friendly)
“A CSS transition is a simple smooth change between two states, like a button gently changing color on hover. A CSS animation is more powerful — it lets you define multiple steps in a sequence, like a loading spinner that keeps rotating on its own, without needing anything to trigger it first.”
Code Example
/* Transition: triggered by :hover, smooth two-state change */
.button {
background-color: #1f2937;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.button:hover {
background-color: #2563eb;
transform: translateY(-2px);
}
/* Animation: multi-step, self-running, loops forever */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}Follow-up Questions
- What does animation-fill-mode control and what happens without it?
- How would you pause and resume a CSS animation with animation-play-state?
- Why should you prefer animating transform/opacity over top/left/width?
- How do you detect when a CSS transition or animation has finished, in JavaScript?
MCQ Practice
1. What is required to trigger a CSS transition?
Transitions only run when the underlying property value actually changes due to some trigger.
2. Which feature is unique to CSS animations, not transitions?
Only @keyframes-based animations can natively loop or run automatically without a triggering event.
3. Which properties are generally best for smooth, GPU-accelerated CSS animation?
transform and opacity can be composited by the GPU without triggering layout/reflow.
Flash Cards
CSS transition core trait? — Interpolates one property between two states, requires a trigger.
CSS animation core trait? — Defines multi-step @keyframes, can autoplay and loop without a trigger.
Best properties to animate for performance? — transform and opacity — GPU-composited, no layout reflow.
Can transitions loop natively? — No — looping requires @keyframes animations with animation-iteration-count.