Home › Code Snippets › CSS Snippets › Reference › transition

CSS Reference

transition

Animates changes between two states. The simplest way to add motion to any UI element.

Last updated: October 2026

Definition: The transition property smoothly animates a change between two states of a CSS property. It requires a state change to trigger — like a hover, focus, or class toggle. It supports four sub-properties: property, duration, timing-function, and delay.

🎬 Live Example

Hover each box to see the transition. Each one uses a different timing function.

ease

ease-in-out (0.5s)

bounce

💡 The third box uses a custom cubic-bezier for a bouncy effect. Notice how it overshoots before settling.

📝

Basic Syntax

/* Shorthand: property duration timing-function delay */
.button {
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #8b5cf6;
}

The transition sits on the base state — not on the :hover state.

🎯 All transition Sub-Properties

Property	Purpose
`transition-property`	Which property to animate. `all`, `opacity`, `transform`, etc.
`transition-duration`	How long the transition takes. `0.3s`, `200ms`.
`transition-timing-function`	Easing curve. `ease`, `linear`, `ease-in-out`, `cubic-bezier()`.
`transition-delay`	Wait time before the transition starts.

The Four Shorthand Values

/* Property duration timing-function delay */
.element {
    transition: opacity 0.3s ease 0s;
}

/* All four values are optional except duration defaults */
.transition-a {
    transition: opacity 0.3s;             /* duration only */
}

.transition-b {
    transition: opacity 0.3s ease;        /* + timing function */
}

.transition-c {
    transition: opacity 0.3s ease 100ms;  /* + delay */
}

The Easing Functions

Value	Behavior
`linear`	Constant speed
`ease`	Slow start, fast middle, slow end (default)
`ease-in`	Slow start, fast end
`ease-out`	Fast start, slow end
`ease-in-out`	Slow start and end, fast middle
`cubic-bezier()`	Custom curve. 4 values between 0 and 1 (or beyond for overshoot)
`steps(n, end)`	Instant transitions at N steps — good for sprite animations

Common transition Recipes

/* Button hover */
.button {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Card lift */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Link underline */
.link {
    transition: color 0.15s ease;
}

/* Input focus */
.input {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Modal fade in */
.modal {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Menu slide */
.menu {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

Transitioning Multiple Properties

/* Comma-separate for different timings */
.card {
    transition:
        background-color 0.2s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* Same timing for all */
.card {
    transition: all 0.3s ease;
}

/* Custom durations per property */
.button {
    transition:
        opacity 0.15s ease-out,
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

transition: all works but is usually less performant and less predictable. Prefer listing exact properties.

Which Properties Are Animatable?

Not all CSS properties can be transitioned. The most common animatable properties:

opacity — fades
transform — GPU accelerated, ideal
color / background-color — smooth color shifts
border-color — highlight effects
box-shadow — depth animation
filter — blur, brightness
width, height, top, left — triggers layout (slower)

💡 Performance tip: transform and opacity are the fastest properties to animate because they don't trigger reflows. Prefer them for hover effects and animations.

🎯 transition vs animation

Feature	transition	animation
Trigger	State change (hover, focus)	Runs automatically
Keyframes	No	Yes (@keyframes)
Intermediate steps	No — just start and end	Yes — unlimited
Loop	No	Yes (infinite)
Reversible	Automatic (transition back)	Manual
Complexity	Simple	More powerful

Use transition for hover effects, focus states, and simple state changes. Use animation for loaders, attention-grabbing effects, and multi-step animations.

⚠️ Common Mistakes

Adding transition to the :hover state. It should be on the base state, not the hover state. Otherwise the "off" transition doesn't fire.
Using transition: all everywhere. Specify exact properties for performance and predictability.
Too-long durations. Above 400ms feels sluggish. 150–300ms is the sweet spot for most UI.
Trying to transition display: none. It's not animatable. Use opacity or transform with visibility instead.
Animating layout properties (width, height, top). These trigger reflows and are much slower than transform and opacity.
Forgetting prefers-reduced-motion. Some users get motion sickness. Respect their preference.
No fallback for older browsers. Very old browsers ignore transition and just jump to the end state — which is fine. But test.

♿ Accessibility Notes

Respect prefers-reduced-motion. Disable or reduce transitions for users who've opted out.
Never rely on animation alone to convey state. Add text, color, or icons.
Avoid flashes and rapid transitions. Users with photosensitivity can be affected. Keep durations reasonable and avoid strobe effects.
Test with keyboard navigation. Transitions triggered by focus states should still work and be visible.
Ensure focus rings stay visible. A transition on border-color can hide the focus indicator. Use outline for focus rings.

❓ Frequently Asked Questions

What is the CSS transition property?

The transition property animates changes between two states of an element. When a property changes (for example, on hover), the transition smoothly interpolates between the old value and the new value over a specified duration.

What is the difference between transition and animation?

transition animates between two states — a start and an end — triggered by a state change. animation can loop, use keyframes, and control multiple intermediate steps. Transitions are simpler; animations are more powerful.

What does transition: all do?

transition: all applies the transition to every animatable property on the element. It works, but it's usually better to specify exact properties for performance and predictability. Use all for simple cases and be explicit elsewhere.

How do I use easing functions in CSS transitions?

Set the timing function as the third value: transition: opacity 0.3s ease-in-out. Common values are ease, ease-in, ease-out, ease-in-out, linear, and cubic-bezier(x1, y1, x2, y2) for custom curves.

Should I always use transitions?

No. Respect the prefers-reduced-motion media query. Users who've opted out of motion should not see transitions or animations. Always disable non-essential motion for them.