CSS Transition Generator: Duration, Delay & Easing
Set the property, duration, delay and easing (including custom cubic-bezier curves), preview it live, then copy clean CSS or Tailwind classes.
Hover the box to preview the transition
The transition property is how you turn an abrupt style change into a smooth one. Instead of a hover state or a class toggle snapping into place, the browser animates between the old value and the new one over whatever duration, delay and easing you set.
Getting the shorthand right by hand means remembering four values in the right order and picking an easing curve that actually matches the motion you want. This tool builds the declaration for you, previews it on a live element, and gives you a way to design a custom cubic-bezier curve instead of guessing at one.
How to Use This Tool
Pick a property to transition (or add more than one), set duration and delay, then choose an easing keyword or dial in a custom cubic-bezier curve. Switch the trigger to click if your real use case is a toggled class rather than a hover state, then copy the CSS or Tailwind output.
Common Use Cases
Transitions are the standard way to make hover states, dropdown menus, modal fades and button presses feel intentional rather than instant. Pairing opacity and transform keeps the animation smooth because neither property triggers layout reflow, which is also why animating width or height directly tends to look janky by comparison. If you need something more elaborate than a two-state change, like a looping or multi-step sequence, that's a job for keyframes rather than a transition; the CSS Animation Generator builds those.
Frequently Asked Questions
cubic-bezier(x1, y1, x2, y2). The x values control timing (both must sit between 0 and 1) and the y values control how far the animation overshoots or eases at each point. Keywords like ease and ease-in-out are just named shortcuts for specific bezier curves. Setting y values above 1 or below 0 is what produces a bounce or overshoot effect, which the custom curve editor above lets you build visually.transition declaration.transition-duration is how long the animation takes to run. transition-delay is how long the browser waits before it starts. A 0.3s duration with a 0.2s delay finishes 0.5s after the triggering change.transition-behavior: allow-discrete and a @starting-style block, which is what makes them animatable at all. See the CSS Transition Guide for the full explanation of how allow-discrete and @starting-style work together.:hover, with the transition declared on the base selector either way.duration-300); anything else is output as an arbitrary value.