Splitting a transition declaration per property
A transition lists a property, a duration, an easing and a delay as one part, with parts separated by commas. Giving two properties different timings means writing two parts, and by hand it is easy to swap the delay slot with the duration slot. This builder takes values for up to two parts and assembles them in the correct order.
It uses only the values you enter
This tool does not suggest how many milliseconds are appropriate. It builds the code from your numbers and reports the latest finish time in milliseconds. Property names and part order follow the W3C CSS Transitions specification, and it can add a prefers-reduced-motion block for visitors who asked for less movement (as of October 2026).
What it does not do
It does not build multi-step animations; defining intermediate points belongs to a keyframes tool. Custom curves are deliberately absent from the easing list, so generate a cubic-bezier value in the dedicated tool and paste it in. A duration of 0 or less is blocked because nothing would be visible.
Frequently Asked Questions
Separate the parts with commas and write a property, duration, easing and delay in each. This generator takes values for up to two parts and writes them in that order.
When two time values appear, the first is the duration and the second is the delay. A single time value is read as the duration.
A transition bridges two states when a value changes. Defining intermediate steps, or looping on its own, needs a keyframes animation.