Transitions
Transitions animate property changes smoothly: transition: background-color 0.3s ease plays on hover. Add multiple properties separated by commas. Transitions play forward and reverse automatically with state changes.
CSS Transitions .button {
background: blue;
color: white;
transform: scale(1);
/* transition: property duration easing delay */
transition: background 0.3s ease,
transform 0.2s ease;
}
.button:hover {
background: darkblue;
transform: scale(1.05);
}
/* Transition all properties */
.card {
transition: all 0.3s ease;
}
Test your understanding before moving on
1. CSS transitions animate:
A. Only opacity
B. Only colors
C. Changes between two states (hover, focus, etc.)
D. Infinite loops
💡 Transitions animate the change between two states — like default to hover.
2. Which property sets transition duration?
A. transition-delay
B. transition-time
C. transition-duration
D. transition-speed
💡 transition-duration: 0.3s sets how long the transition takes.
3. What does "ease" mean as easing function?
A. Linear
B. Starts slow, speeds up, ends slow
C. Starts fast
D. Constant speed
💡 ease is the default — slow start, faster middle, slow end.
4. Which CSS property should you transition for performance?
A. width and height
B. margin and padding
C. transform and opacity
D. color and background
💡 transform and opacity are GPU-accelerated — use them for smooth 60fps animations.
5. transition: all 0.3s ease does what?
A. Transitions only colour
B. Transitions all changed properties in 0.3s
C. Transitions nothing
D. Transitions once only
💡 transition: all transitions every changed property — convenient but slightly less performant.