Where do I put the transition, on the base state or the hover state?

Put it on the base state. A transition declared on the base rule animates the property in both directions - into the hover change and back out of it. Declaring it only on :hover animates the change in but lets it snap back when the pointer leaves.

What is the order of the transition shorthand?

property, duration, timing-function, delay. For example transition: opacity 300ms ease-in-out 100ms. The first time value is always the duration and the second is the delay, so if you supply only one time value it is read as the duration.

Can I transition more than one property at once?

Yes. Separate each transition with a comma, for example transition: opacity 300ms ease, transform 200ms ease-out. This tool builds that list for you as you add layers, giving each property its own duration, timing function and delay.

Why will my display: none to display: block transition not animate?

Because display is not an animatable property - there is no intermediate value between none and block, so the browser has nothing to tween. Transition opacity and visibility together instead, or use the transition-behavior: allow-discrete behaviour in newer browsers to fade an element in from display: none.

What is a cubic-bezier timing function?

cubic-bezier(x1, y1, x2, y2) defines a custom acceleration curve using two control points. The keywords ease, ease-in, ease-out and ease-in-out are all shortcuts for specific cubic-bezier values. Control points with a y value above 1 or below 0 create an overshoot or anticipation, which is how a bounce effect is built.

Which properties should I animate for smooth performance?

Prefer transform and opacity. They are composited on the GPU and do not trigger layout, so they animate at 60fps. Animating width, height, top, left or margin forces the browser to recalculate layout on every frame, which is the most common cause of stuttering transitions.

Does this CSS transition generator send my data anywhere?

No. The preview and CSS output are generated entirely in your browser with JavaScript. Nothing is uploaded or stored, and the tool keeps working with no network connection once the page has loaded.

CSS Transition Generator

Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.

Presets

Toolz

Layers

Layer 1

Property

Timing function

Duration300ms

Delay0ms

Generated CSS

transition: all 300ms ease;

Category:css

Mode:Offline

Version:1.0.0

Access:Free

What is the CSS Transition Generator?

The CSS Transition Generator is a visual editor for the CSS transition property. You choose which property to animate, set the duration, pick a timing function, and add a delay, then trigger a live preview to watch the exact easing before copying the declaration. You can layer several transitions in one shorthand - for example fading opacity while moving a transform - and each layer gets its own property, duration, timing and delay.

A transition tells the browser to animate the change between two values of a property rather than switching instantly. Change a background colour on hover with no transition and it snaps; add transition: background-color 200ms ease and the same change eases over a fifth of a second. The transition lives on the base state, not the hover state, so the element animates both into and out of the change, which is what makes an interaction feel finished rather than abrupt on the way back.

Everything happens in your browser. Start from a preset like Fade, Button hover or Bounce, adjust the sliders and selects, press the preview trigger to see the motion, and copy the shorthand. The tool writes the four parts in the order the spec requires - property, duration, timing-function, delay - and omits the delay when it is zero. No account, no uploads, and it keeps working offline once the page has loaded.

The single most common mistake is trying to transition a property that has no intermediate values. display: none to display: block cannot animate, because display is not an animatable property - there is no halfway between none and block - which is why a fade-in built on display alone jumps. The fix is to transition opacity and visibility together, or to use the newer allow-discrete behaviour. It is also worth animating transform and opacity in preference to width, height, top or left: the first two are composited on the GPU and do not trigger layout, so they stay smooth, while animating layout properties recalculates the page on every frame and is the usual source of janky, stuttering transitions.

How to use the CSS Transition Generator?

Pick a preset or a property

Start from a preset such as Fade, Button hover, or Bounce, or choose the property you want to animate - opacity, transform, background-color, or all.

Set duration, easing and delay

Drag the duration and delay sliders and choose a timing function - ease, linear, a cubic-bezier curve, or steps. The values update in the shorthand as you go.

Preview the motion

Press the trigger to play the transition on the preview element. Because a transition needs a state change to run, the preview toggles between two states so you see the easing.

Copy the CSS

Copy the generated transition shorthand and paste it onto the base state of your element, not the hover state, so it animates in both directions.

Key Features

Multiple Transition Layers

Add and remove layers to animate several properties at once - each with its own property, duration, timing function and delay - joined into one comma-separated shorthand

Real Easing Curves

The four CSS keywords plus curated cubic-bezier presets, including a Material standard curve and an overshoot Back curve, and a steps() function for frame-by-frame motion

Live Hover Preview

A trigger plays the transition on a preview element by toggling between two states, so you feel the timing and easing before copying a single line

Correct Shorthand Order

Output follows the spec order of property, duration, timing-function and delay, and drops the delay when it is zero so the CSS stays clean

Frequently Asked Questions

A CSS transition animates the change between two values of a property over a set duration instead of switching instantly. You define it once on the base state, and the browser eases the property whenever its value changes, such as on hover or when a class is toggled.

Related Tools

CAG

css

CSS Animation Generator

Build CSS keyframe animations from presets like fade, slide, bounce and spin. Adjust duration, easing, delay, iteration and direction, preview live, then copy the keyframes and animation shorthand.

CGG

css

CSS Grid Generator

Build CSS Grid layouts visually. Set columns, rows, track sizes, gaps and alignment with a live preview, then copy the generated grid CSS - all in your browser.

CTG

css

CSS Transform Generator

Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.

CGG

css

CSS Glassmorphism Generator

Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius - then copy production-ready CSS.

Comments

0 comments

No comments yet. Be the first to share your thoughts!

css transition generatorcss transitiontransition csscss hover effecttransition timing functioncubic beziercss easetransition delaycss animation timing

Learn more

Read the full CSS Transition Generator guide

Command Palette