Choose what transitions and how long it takes, describe the state the element moves to, then toggle the preview element and copy the two rules the generator exports.
Runs locally in your browserThe workbench returns a pair of CSS rules: a base rule that carries the transition shorthand — property, duration, easing and delay — and a target rule with the transform, opacity, background colour and filter the element changes to. Toggling the preview element runs that pair on a real DOM node, so the state change you see is the state change you copy.
Every control is exported exactly as the readout shows it. Values stay inside the range printed next to each field, and a cleared field returns to its last valid value instead of exporting a zero. The conversion runs in the page: nothing is uploaded and the tool keeps working offline.
The first rule holds the transition shorthand: which property animates, how long it takes, the easing curve and any delay. The second rule describes the target state — the transform, the opacity, the background colour and a slight brightness and saturation filter — and it is applied when you toggle the element.
Only the properties listed in the transition shorthand animate. If the list says opacity, the transform, colour and filter of the target rule are applied in one step; with all, every value that differs moves together. The preview behaves the same way.
The property selector offers all, transform, opacity, background-color and filter — the five things the preview element changes. Naming one keeps the exported list short, which is usually what a hover or focus state needs; all is the safe choice while you are still experimenting.
The presets preload that choice: Hover lift animates all, Fade animates opacity, Zoom and Soft spin animate transform, and Color swap animates background-color. The remaining controls still describe the target state in every case, so you can edit a preset and keep the parts you like.
Duration runs from 0 to 5000 ms and delay from 0 to 3000 ms; both are rounded to whole milliseconds. The easing list carries the five CSS keywords together with two cubic-bézier curves, and the readout always prints the value that appears in the exported rule.
Because the numbers are clamped to the range printed on the field, the exported rule never carries a value the browser would drop or reinterpret — a negative time, for example, is read as a delay rather than a duration. Test the copied rules on the element that will really animate: a transform on an ancestor composes with the one you animate.