CSS Transition Generator

Each segment is written as property, duration, timing function, then delay, for example opacity 300ms ease 0ms. The generator always emits durations and delays in milliseconds with the ms unit, so the order is correct every time.

The transition shorthand accepts several comma separated segments, one per property. The tool builds one segment per selected chip, which is clearer than the all keyword and avoids animating properties you did not intend to.

Yes. Choose a preset like ease-in-out, or paste a cubic-bezier(...) value into the timing text field. Your value is passed through verbatim into the output, so a curve copied from a bezier editor lands untouched in the declaration.

Duration is how long the change takes once it begins, and delay is how long the browser waits before starting. Both are set here in milliseconds and both are capped at 3000ms in the sliders, though larger values are valid CSS.

You can select all, but naming specific properties is usually faster because the browser does not have to watch every property for changes. It also avoids surprise animations on layout properties. The generator supports both.

Yes. This tool applies one duration, one timing function and one delay across every selected property. If you need different timings per property, generate the segments separately and join them with commas.

Yes, and they are good defaults. Transform and opacity can be composited by the browser without triggering layout or paint, so transitions on them tend to stay smooth. Both are offered as chips for exactly that reason.

The engine requires at least one property, so with nothing selected the preview shows an error comment instead of a declaration. Toggle any chip on and a valid transition line appears again.

No. The transition string is assembled entirely in your browser and your settings are never uploaded, so the tool works offline and keeps your code local.