CSS Transition Generator

How to use it

1. Pick the property to transition: all, opacity, transform, background-color, color, width, height, border-radius, box-shadow, or a custom name.
2. Set the duration in milliseconds, from 0 to 10000.
3. Set the delay in milliseconds if the transition should wait before starting.
4. Pick an easing: the keywords linear, ease, ease-in, ease-out and ease-in-out, or a custom cubic-bezier with four numbers.
5. Read the curve chart: x1 and x2 must stay between 0 and 1, while y1 and y2 may overshoot for bounce effects.
6. Press Play demo to toggle the box between two states, then copy the CSS.

Common use cases

• Button and card hovers - a 150 to 300 ms transition on transform or background-color.
• Menu and drawer openings - longer durations with ease-out for entrances.
• Staggered reveals - add a delay per item instead of a longer duration.
• Easing experiments - compare ease-in against a custom cubic-bezier on the same motion.
• Motion documentation - hand developers one line of transition CSS with the numbers already settled.

Why it stays private

Property names, timings and easing numbers are combined into a CSS string in this page, and the demo animates a local element. Nothing is uploaded, and the tool works offline.

FAQ

Q: What easing values are supported? A: The keywords linear, ease, ease-in, ease-out and ease-in-out, plus a custom cubic-bezier with four numbers. The curve chart draws each keyword with its standard cubic-bezier equivalent defined in the CSS spec.

Q: What does the delay do? A: The transition waits that many milliseconds after the property changes before it starts. The output always writes the delay explicitly, including 0ms, so the shorthand stays readable.

Q: Can I transition custom properties? A: Choose custom and enter a property name such as filter or grid-template-rows, or several names separated by commas. The tool only checks the name pattern; whether a property animates depends on the browser, since only animatable properties interpolate.

Q: Why do some demo changes jump instead of animating? A: The play button changes transform, background color, opacity, border radius and width at once. With a single property selected, only that property animates and the rest switch instantly, which shows why the property choice matters.