Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
CSS Transitions
CSS transitions create smooth changes between property values - hover effects, color changes, size adjustments. Instead of instant jumps, transitions animate the change over a specified duration, making interfaces feel polished and professional.
Transition Properties
- transition: property duration timing-function delay - Shorthand for all transition properties
- transition-property - Which CSS property to animate: all, color, transform, opacity, background, etc.
- transition-duration - How long the animation: 0.3s (fast), 0.5s (medium), 1s (slow). 0.2-0.3s feels snappy
- transition-timing-function - Speed curve: ease (default), linear, ease-in, ease-out, ease-in-out, cubic-bezier()
- transition-delay - Wait before starting: transition-delay: 0.1s. Useful for staggered effects
- Multiple transitions - transition: color 0.2s ease, background 0.3s ease, transform 0.3s ease
- Animatable properties - Most visual properties can transition: color, background, transform, opacity, border, padding, width, height, box-shadow. NOT display!
Transition Examples
/* Button hover transition */
.btn {
background: #667eea;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
background: #5a6fd6;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.btn:active {
transform: translateY(0);
}
/* Card hover lift */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
/* Color transition */
.link {
color: #333;
transition: color 0.2s ease;
}
.link:hover { color: #E44D26; }Try It Yourself: Transitions
Tip
Always list specific properties in transition rather than using 'all'. transition: all 0.3s ease animates every property change - including accidental ones like color caused by a parent hover. Use transition: transform 0.3s ease, box-shadow 0.3s ease for precise, performant control.
Transitions for state changes, @keyframes for complex multi-step animations
Common Mistake
Putting the transition on the :hover rule instead of the base element. If you write .btn:hover { transition: ... }, the transition only applies going IN to the hover state - going OUT is instant and jarring. Always put the transition on the base element so both directions animate smoothly.
Practice Task
Build a button with 3 transitions simultaneously: (1) background changes from #667eea to #5a6fd6, (2) transform: translateY(-3px) on hover, (3) box-shadow appears. Use the transition shorthand with all 3 properties listed separately. Also add :active { transform: translateY(0) } for press feedback.
Quick Quiz
Key Takeaways
- CSS transitions create smooth changes between property values - hover effects, color changes, size adjustments.
- transition: property duration timing-function delay - Shorthand for all transition properties
- transition-property - Which CSS property to animate: all, color, transform, opacity, background, etc.
- transition-duration - How long the animation: 0.3s (fast), 0.5s (medium), 1s (slow). 0.2-0.3s feels snappy