CSS Transition Generator

Build CSS transitions with easing and a live hover preview.

Presets:

Property

Duration0.4s

Timing

Delay0s

Target Property: allDuration: 0.4sEasing: ease-in-outDelay: 0sCSS Size: 36 B

Live preview (hover the box)

CSS Code

transition: all 0.4s ease-in-out 0s;

How CSS transitions work

The transition shorthand animates a property smoothly when its value changes — on hover, focus, or a class toggle. It takes the property to watch, a duration, a timing function (the easing curve), and an optional delay. Transitioning transform and opacity is cheapest because the browser can offload them to the GPU. Hover the box above to feel your settings, then copy the code.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing a transition with the properties, duration and easing you want.
Comparing durations against a live hover preview.
Transitioning several properties with different timings in one declaration.
Getting a transition that only animates what you intend.
Building a hover effect without guessing at the syntax.

Frequently Asked Questions

What order do the shorthand values go in?: Property, duration, timing function, delay — and the two time values are positional, so the FIRST one is always the duration. `transition: all 0.4s ease-in-out 0.2s` waits 200ms then runs for 400ms; swap them and you get a 200ms animation after a 400ms wait.
Why prefer transform and opacity over width or top?: Because they can be composited on the GPU without touching layout. Animating `width` forces the browser to re-run layout and paint on every frame, which is what makes an animation janky on a cheap phone; `transform: scaleX()` reaches the same visual result on the compositor.
Why does `all` show up in every tutorial if it is discouraged?: Because it is convenient and the cost is invisible until it bites. `all` makes the browser watch every animatable property, including ones you change for unrelated reasons, so a class toggle can animate a colour you meant to change instantly. Naming the property is both faster and more predictable.
What does the bouncy preset's cubic-bezier do?: `cubic-bezier(0.68, -0.55, 0.27, 1.55)` puts its control points OUTSIDE the 0–1 range on the y axis, so the value overshoots the target and settles back — that is the bounce. The x coordinates must stay within 0–1 because they are time, and time cannot run backwards.
Why does nothing animate when the element first appears?: Because a transition needs a change between two rendered states, and an element being inserted has no previous value to move from. Either render it first and change the class on the next frame, or use a keyframe animation, which does not need a prior state.

Common errors and gotchas

Transitioning `all`, which animates properties you did not intend and costs performance.
Animating a property that forces layout, such as width or top, rather than transform or opacity.
Choosing a duration long enough to feel sluggish on a frequently used control.
Declaring the transition on the hover state rather than the base, so it only eases one way.
Ignoring reduced-motion preferences, which a transition must respect as much as an animation.