Learn the concept
Transitions & Keyframe Animations
Transitions animate between two states when a property changes (e.g., on hover), requiring a trigger. Animations use @keyframes to define multi-step sequences that can run automatically, loop infinitely, and control timing at each step independently.
CSS Transitions:
transition-property, transition-duration, transition-timing-function, transition-delaytransition: property duration easing delayCSS Animations:
@keyframesanimation-name, animation-duration, animation-iteration-count, animation-direction, etc.Performance tip: Only animate transform and opacity — they don't trigger layout recalculation (reflow). Avoid animating width, height, top, left, margin, padding.
When to use which:
/* Simple hover transition */
.button {
background: #3b82f6;
color: white;
transform: scale(1);
transition: all 0.2s ease;
}
.button:hover {
background: #2563eb;
transform: scale(1.05);
}
/* Multiple properties with different timing */
.card {
opacity: 0.8;
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition:
opacity 0.2s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.card:hover {
opacity: 1;
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}Such as buttons that smoothly change color or size on hover, or dropdown menus that gracefully slide open and close.
By designing custom loading spinners or progress bars that animate continuously while content is being fetched.
Where elements fade in, slide, or scale at different stages to guide the user through a new feature or application.
Develop a navigation bar where menu items have smooth transitions on hover and active states.
Create an image gallery where captions animate in and out when images are hovered over, using CSS animations for complex effects.
Apple's product websites extensively use CSS transitions and animations to create a polished and fluid user experience, with elements subtly animating into view or responding gracefully to user interactions.
Stripe's payment forms and dashboard leverage subtle CSS animations and transitions to provide visual feedback to users, such as animated input fields on focus or loading indicators during form submission.