CSS Transition Generator
Build a transition shorthand from property, duration, timing function and delay, with a hover preview and a custom cubic-bezier() option.
Hover the box below to preview the transition.
transition: all 0.3s ease;transition: all 0.3s ease;
The four parts of a transition shorthand
This generator builds a ready-to-paste CSS transition shorthand from four parts: the property to animate, how long the animation lasts in seconds, the timing function that shapes its speed curve, and an optional delay before it starts. As you change any field, the code updates instantly and a live preview box animates whenever you hover it, so you can feel exactly how your settings behave before copying them into your stylesheet. “Preview on” chooses what sets it off: Hover (:hover), Focus (:focus), or a class switched by a click (.is-active), which is the one a touch screen can use; the second rule the page writes follows the choice. “Behind the preview” puts it on this page, white, black, a checkerboard or a colour you pick, without touching the CSS. The output follows the standard property duration timing delay order, and a zero delay is left out to keep the value clean and minimal.
Choosing duration, timing, and delay
Duration and delay are entered in seconds and can use decimals such as 0.3 or 0.15 for snappy micro-interactions. Set “Time unit” to milliseconds (ms) and the boxes switch over, converting what is already in them. The timing function controls acceleration: ease starts and ends gently, linear keeps a constant speed, ease-in and ease-out ramp at one end, and cubic-bezier() lets you craft a custom curve. Setting the property to all animates every animatable property at once, while naming a single property like opacity or transform keeps the effect focused and performant. To shape a cubic-bezier() curve by dragging its two handles rather than typing its four numbers, use the Cubic Bezier Generator.
Frequently asked questions
Why is the delay missing from my transition value?
A delay of 0 seconds is intentionally omitted because it has no effect. The tool outputs just "property duration timing" in that case, which is the cleanest valid form. Enter any non-zero delay and it is appended at the end, for example "opacity 0.5s ease-in-out 0.2s".
How do I animate only one property instead of all?
Pick a specific property such as opacity, transform, or background-color from the property field instead of "all". Animating a single, cheap-to-render property like transform or opacity is usually smoother than animating "all".
Can it write the before and after values, or use milliseconds?
Yes. Give a property its from and to values and the page writes the rule together with a second rule that changes it — :hover, :focus or .is-active, whichever “Preview on” is set to. “Other…” takes any property name, and the time unit can be seconds or milliseconds.
Can I draw my own easing curve, start from an example, or send the transition to someone?
Yes. Pick “cubic-bezier…” as the timing function and boxes open for the curve’s control points, with the curve drawn beside them; the vertical values may run past the ends for an overshoot, and the preview moves on the same curve. “Start from an example” fills in a worked transition, such as Lift a card or Pop with overshoot, with its own before and after values. Copy link puts every row and the time unit in a link to send; the rows are not written into the address bar as you type.
Can I preview a focus or click transition, or see it on my own background?
Yes. “Preview on” picks what sets the preview off: Hover (:hover), Focus (:focus) — click the box or Tab to it — or A class switched by a click (.is-active), which a tap also switches, so it is the one to use on a touch screen. The second rule in the CSS is written under that selector, and the To box says which state it is. “Behind the preview” puts the preview on this page, white, black, a checkerboard to see transparency, or a colour you pick; it changes only what the preview sits on, not the CSS.