CSS Transition Builder

About CSS transition builder

Write the shorthand transition property by choosing what animates, how long it takes, which easing keyword to use and whether to wait first. A hover box shows the timing in motion, so you can judge whether 200 or 400 milliseconds feels right before you commit.

How to use it

1. Pick a Property from the list, which includes all, opacity, transform, background-color, box-shadow and others.
2. Drag Duration from 0 to 3000 ms in 50 ms steps.
3. Choose a Timing function: ease, linear, ease-in, ease-out or ease-in-out.
4. Set Delay from 0 to 1000 ms if the change should begin after a pause.
5. Hover the demo box to feel the timing, then press Copy CSS.

A short color fade with a pause

Property background-color, 200 ms, ease-in-out, delay 100 ms

transition: background-color 200ms ease-in-out 100ms;

When to use it

• Setting up a button hover that fades the background rather than snapping.
• Choosing a duration for a dropdown or accordion so it feels quick but not abrupt.
• Comparing ease-out and linear to decide which suits a sliding panel.
• Adding a small delay so a tooltip does not appear on accidental hovers.

Questions about CSS transition builder

Why does the demo animate everything when I choose one property?

The demo box always transitions all, since it changes size, color, corners and scale together. The line you copy uses the property you selected, so test that on your real element.

How are long durations written?

Values of 1000 ms or more are printed in seconds with one decimal, so 1500 becomes 1.5s. Shorter values stay in milliseconds, and the delay is omitted when it is zero.

Can I use a custom cubic-bezier?

Not in this builder, which offers the five standard keywords. For a custom curve, generate the cubic-bezier value elsewhere on this site and substitute it into the copied line.

Is a duration of 0 valid?

It is valid CSS and means the change is instant, though it defeats the purpose of a transition.

Related tools

• CSS animation builderBuild @keyframes animations with a keyframe timeline, timing controls, and live play button
• Cubic-bezier generatorDrag control points on an SVG canvas to craft cubic-bezier easing curves — includes preset library
• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview
• Glassmorphism generatorCreate frosted-glass effects with backdrop blur, transparency, and border controls — live preview included
• Neumorphism generatorBuild soft-UI neumorphic elements with dual box-shadows derived from a single base color