Topic 12 of 30
Transitions
Overview
CSS transitions animate property changes from one state to another over time. They are the easiest way to add smooth interactivity — hover effects, focus states, and UI state changes all benefit from transitions.
Syntax
css
/* Single property */
transition: background-color 0.3s ease;
/* Multiple properties */
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
opacity 0.2s ease;
/* All properties (use sparingly — expensive) */
transition: all 0.3s ease;
/* Timing functions */
transition-timing-function: ease; /* default */
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Material Design */Common Pitfalls
- transition: all is convenient but expensive — it watches every property. Always specify properties explicitly.
- Some properties can't be transitioned: display, visibility (use opacity + pointer-events instead).
- Interview tip: transition-delay adds a pause before the animation starts — useful for sequential animations.
Real-World Example
Smooth hover effects on a CTA button and card:
example
css
.btn-primary {
background: #FFD700;
color: #000;
padding: 12px 28px;
border-radius: 8px;
border: none;
cursor: pointer;
font-weight: 600;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
.btn-primary:hover {
background: #FFC200;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255, 215, 0, 0.35);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: none;
}