CSS & Layout
CSS Transition Builder
Compose one or more transition properties with their durations, delays and easing curves, watch the change animate in the preview, then copy production-ready CSS. Everything runs in your browser — nothing is sent to a server.
Preset library
Toggle any preset to add a ready-to-use transition — pick several to chain
them into one comma-separated transition value. Every preset stays
fully editable in the transition list below.
Transitions
Each row maps to one entry of the CSS transition shorthand:
property duration easing delay. Leave delay at 0ms to omit it.
Common properties: opacity, transform,
background-color, box-shadow, filter or
all.
Live preview
Start statePress the big Play transition button to animate every recognised property between its start and end value. Properties without a built-in preview still appear in the generated CSS.
CSS output
How it works
Start from the preset library: toggling a preset such as fade, lift or
fade + scale adds its transition to the list, and selecting several composes them
into one comma-separated transition value. Every row is formatted as the CSS
transition shorthand — the property, a duration, an easing function and
an optional delay — and multiple rows are joined with commas. Durations and delays
accept ms or s units, easing accepts the standard keywords plus
cubic-bezier(), steps() and linear(). Anything that
cannot be parsed is flagged with a clear message instead of producing broken CSS. The
optional share link encodes the transitions in the URL fragment, which stays in your browser.