CSS transitions enable smooth, gradual changes between property values over a specified duration. Instead of instant changes when you hover or toggle a class, transitions create fluid animations that feel natural and polished. They're the easiest way to add motion to your designs—requiring just a few lines of CSS to transform abrupt state changes into elegant animations that enhance user experience.
What Are CSS Transitions?
Transitions animate changes to CSS properties from one value to another. They activate automatically when a property value changes (like on hover, focus, or class toggle).
How Transitions Work
- Element has an initial state (e.g., normal button)
- A trigger occurs (e.g., hover)
- Property value changes (e.g., background color)
- Transition smoothly animates from old to new value
Without Transitions
- Instant, jarring changes
- Feels abrupt and mechanical
- Less engaging user experience
- Harder to track what changed
With Transitions
- Smooth, gradual changes
- Feels natural and polished
- More engaging and delightful
- Draws attention to changes
Transitions Comparison (Hover Buttons)
Key Concept: Transitions don't create animations by themselves—they smooth out changes that are already happening. You still need a trigger (like :hover) to change property values.
Transition Properties
CSS transitions use four main properties that control what animates, how long it takes, the animation curve, and any delay.
Transition Properties
| Property | Values | Description |
|---|---|---|
transition-property | all, none, or specific properties | Which CSS properties to transition |
transition-duration | Time in seconds (s) or milliseconds (ms) | How long the transition takes |
transition-timing-function | ease, linear, ease-in, ease-out, etc. | Speed curve of the transition |
transition-delay | Time in seconds (s) or milliseconds (ms) | Wait time before transition starts |
/* Individual properties */
.element {
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;
}
/* Shorthand: property duration timing-function delay */
.element {
transition: background-color 0.3s ease 0s;
}
/* Even shorter (duration is required, others optional) */
.element {
transition: background-color 0.3s;
}
/* Transition all properties */
.element {
transition: all 0.3s ease;
}
/* Multiple properties */
.element {
transition:
background-color 0.3s ease,
transform 0.5s ease-in-out,
opacity 0.2s linear;
}transition-duration
transition-duration sets how long the transition takes to complete. Use seconds (s) or milliseconds (ms).
/* Duration in seconds */
.element {
transition-duration: 0.3s; /* 300 milliseconds */
transition-duration: 1s; /* 1 second */
transition-duration: 2.5s; /* 2.5 seconds */
}
/* Duration in milliseconds */
.element {
transition-duration: 300ms; /* Same as 0.3s */
transition-duration: 1000ms; /* Same as 1s */
}
/* Common durations */
.fast {
transition-duration: 0.15s; /* Quick, snappy */
}
.medium {
transition-duration: 0.3s; /* Standard, most common */
}
.slow {
transition-duration: 0.6s; /* Deliberate, noticeable */
}
/* Shorthand */
.element {
transition: all 0.3s;
}Transition Duration Comparison (Hover to Test)
⏱️ Choosing Duration:
0.15-0.2s: Micro-interactions (checkboxes, toggles)
0.3-0.4s: Most hover effects, buttons (sweet spot)
0.5-0.8s: Larger movements, modal openings
1s+: Attention-grabbing effects, page transitions
Most transitions should be 0.2-0.4s. Faster feels snappy, slower feels sluggish.
transition-timing-function
transition-timing-function controls the speed curve—how the animation accelerates and decelerates over time.
Built-in Timing Functions
| Property | Values | Description |
|---|---|---|
linear | Constant speed | No acceleration or deceleration |
ease | Slow start, fast middle, slow end | Default, most natural feeling |
ease-in | Slow start, fast end | Accelerates toward end |
ease-out | Fast start, slow end | Decelerates toward end (common for exits) |
ease-in-out | Slow start and end | Smooth acceleration and deceleration |
/* Built-in timing functions */
.element {
transition-timing-function: linear; /* Constant speed */
transition-timing-function: ease; /* Default */
transition-timing-function: ease-in; /* Accelerate */
transition-timing-function: ease-out; /* Decelerate */
transition-timing-function: ease-in-out; /* Both */
}
/* Custom cubic-bezier curves */
.element {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Steps (for sprite animations) */
.element {
transition-timing-function: steps(4);
transition-timing-function: step-start;
transition-timing-function: step-end;
}
/* Shorthand */
.element {
transition: all 0.3s ease-out;
}Timing Functions Visualization (Hover to Race)
Most Common: ease (default) and ease-out work well for most situations. ease-out is especially good for exit animations (things leaving the screen) because they decelerate naturally.
transition-delay
transition-delay adds a wait time before the transition starts. Useful for creating staggered animations.
/* Delay in seconds */
.element {
transition-delay: 0.5s; /* Wait 0.5s before starting */
transition-delay: 1s; /* Wait 1s before starting */
}
/* Delay in milliseconds */
.element {
transition-delay: 500ms; /* Same as 0.5s */
}
/* No delay (default) */
.element {
transition-delay: 0s;
}
/* Negative delay (starts partway through) */
.element {
transition-delay: -0.2s; /* Starts 0.2s into animation */
}
/* Staggered animation */
.item:nth-child(1) { transition-delay: 0s; }
.item:nth-child(2) { transition-delay: 0.1s; }
.item:nth-child(3) { transition-delay: 0.2s; }
.item:nth-child(4) { transition-delay: 0.3s; }
/* Shorthand: property duration timing-function delay */
.element {
transition: transform 0.3s ease 0.2s;
}Transition Delay (Staggered Animation)
Which Properties Can Transition?
Not all CSS properties can be transitioned. Only properties with intermediate values can animate smoothly.
Transitionable Properties
✓ Can Transition
- Colors: color, background-color, border-color
- Sizes: width, height, padding, margin
- Transforms: transform (all functions)
- Opacity: opacity
- Positions: top, left, right, bottom
- Shadows: box-shadow, text-shadow
- Filters: filter, backdrop-filter
✗ Cannot Transition
- Display: display (no intermediate values)
- Font-family: font-family
- Position: position
- Text: text-align, vertical-align
- Visibility: visibility (but can fade)
Transitionable Properties (Hover Each)
Practical Transition Examples
Button Hover Effects
Button Hover Effects
Card Hover Effects
Card Hover Effects
Navigation Menu
Animated Navigation Menu
Transition Best Practices
Performance Tips
- Prefer transform and opacity: GPU-accelerated, smoothest performance
- Avoid transitioning: width, height, top, left (trigger layout recalculations)
- Use will-change sparingly: Hints browser to optimize specific properties
- Keep durations short: 0.2-0.4s for most effects
- Test on mobile: Slower devices may struggle with complex transitions
Common Patterns
/* Good: Transition specific properties */
.button {
transition: background-color 0.3s ease, transform 0.3s ease;
}
/* Avoid: transition all (can cause performance issues) */
.button {
transition: all 0.3s ease; /* Only if absolutely necessary */
}
/* Use transform instead of position */
.bad {
transition: top 0.3s ease;
}
.good {
transition: transform 0.3s ease;
}
/* Smooth enter/exit */
.modal {
opacity: 0;
transform: scale(0.8);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.modal.active {
opacity: 1;
transform: scale(1);
}
/* will-change hint (use sparingly) */
.heavy-animation {
will-change: transform, opacity;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.heavy-animation:hover {
/* Transitions will be optimized */
}Key Takeaways
- Transitions: Smooth changes between property values
- Duration: 0.2-0.4s for most effects (required property)
- Timing functions: ease (default), linear, ease-in, ease-out, ease-in-out
- Delay: Wait time before transition starts
- Shorthand: property duration timing-function delay
- Not all properties can transition (need intermediate values)
- Prefer transform and opacity for performance
- Use ease-out for exit animations
- Keep durations under 0.5s for most UI effects
- Stagger delays for sequential animations
- Test on slower devices
- Transitions enhance UX without code complexity
What's Next?
Now that you understand CSS transitions for state changes, you're ready to learn about Animations. In the next lesson, we'll explore keyframe animations that give you complete control over complex, multi-step animations beyond simple state transitions.
Transitions are one of the easiest ways to add polish to your designs. A simple transition: all 0.3s ease on buttons and cards can transform a static interface into something that feels alive and responsive. Practice adding transitions to your hover effects—your users will notice the difference!