Syntax
/* transition: property duration timing-function delay */
transition: all 0.3s ease;
transition: opacity 0.2s ease-in-out;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;| Sub-property | Default | Description |
|---|---|---|
| transition-property | all | Which CSS property to animate (use specific over 'all') |
| transition-duration | 0s | How long the transition takes |
| transition-timing-function | ease | Speed curve of the animation |
| transition-delay | 0s | Wait before starting the transition |
Timing Functions
| Value | Curve | Best For |
|---|---|---|
| ease | Slow start, fast middle, slow end | General use (default) |
| linear | Constant speed | Continuous animations, progress bars |
| ease-in | Slow start, fast end | Elements exiting the screen |
| ease-out | Fast start, slow end | Elements entering the screen |
| ease-in-out | Slow start and end | Elements moving across the screen |
| cubic-bezier(x1,y1,x2,y2) | Custom curve | Precise control — use cubic-bezier.com |
| steps(n) | Stepped / frame-by-frame | Sprite animations, typewriter effect |
Multiple Transitions
/* Different durations per property */
.card {
transition:
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), /* spring */
box-shadow 0.3s ease,
border-color 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
border-color: #2a3f60;
}What Can Be Animated?
Properties that are animatable include: opacity, transform, color, background-color, border-color, box-shadow, width, height, margin, padding, font-size, letter-spacing, and many more.
Properties that cannot be transitioned: display, visibility (snaps instantly), content, font-family.
💡 Visibility trick: Combine opacity and visibility to animate show/hide:
Set both to 0/hidden to hide, 1/visible to show.
transition: opacity 0.3s, visibility 0.3s;Set both to 0/hidden to hide, 1/visible to show.
Performance
Only two properties animate at 60fps without triggering layout or paint: transform and opacity. Everything else may cause performance issues on complex pages:
/* ✅ Performant */
transition: transform 0.3s ease; /* GPU composited */
transition: opacity 0.3s ease; /* GPU composited */
/* ❌ May cause jank on complex pages */
transition: width 0.3s ease; /* triggers layout */
transition: height 0.3s ease; /* triggers layout */
transition: background-color 0.3s; /* triggers paint (usually fine) */