How css transition generator works
The transition property tells the browser to animate a change instead of snapping: transition: opacity 300ms ease-in-out means that whenever opacity changes on that element, the browser interpolates between the old and new value over 300 milliseconds using the ease-in-out curve. The shorthand packs up to four pieces of information per property: which property, how long the change takes, which timing function shapes the speed along the way, and an optional delay before the animation starts.
This generator builds that shorthand for you. Enter one or more properties (comma-separated, or the keyword all for every animatable property), a duration in milliseconds, and an optional delay. For easing you can pick a CSS keyword — linear, ease, ease-in, ease-out, ease-in-out, step-start or step-end — or supply your own cubic-bezier curve with four numbers (the x values must stay between 0 and 1, the y values may overshoot), or use the steps() function for choppy frame-by-frame motion with its jump position.
The output is a complete declaration such as transition: opacity 300ms ease-in-out 100ms; — ready to paste into a stylesheet. When you list several properties, the tool repeats the timing values for each one, because CSS ignores a transition whose duration is missing. Press Preview transition to watch the generated timing curve animate a demo box between two states, which is the fastest way to judge whether an easing feels right.