Developer Tools New Tool

Free Online CSS Transition Generator with Cubic Bezier Curve

Choose the properties you really mean to animate instead of reaching for all, then set a duration, a delay and a timing function for each one separately. The cubic-bezier editor has four editable numbers and draws the curve, and the demo element runs the transition on hover and on a button press.

Free Forever Nothing Uploaded Per property settings Runs in your browser

Free Online CSS Transition Generator with Cubic Bezier Curve

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Transition Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Hover the strip

Hover the dashed strip for the hover version, or press the button to toggle a class.

CSS

Properties pick the ones you mean; the cheap ones are marked

Timing Duration ms Delay ms Easing Separate settings per property

Pick at least one property.

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build a CSS Transition

A few steps, and nothing is uploaded.

Choose the properties Tick the ones that really change between the two states. The list marks which properties the browser can animate on the compositor and which cause layout work.

Set the timing A duration in milliseconds, an optional delay, and an easing. Choose cubic-bezier to get four numbers and a drawn curve rather than a guess.

Split it up if you need to Turn on per property settings and each ticked property gets its own duration, delay and easing, which is how a fade and a slide are given different lengths.

Watch it, then copy it Hover the dashed strip or press the button to run the same transition two ways. The output box holds the finished declaration.

What to Know About CSS Transitions

Including why transition: all is a trap.

transition: all is a performance trap. It tells the browser to watch every animatable property on the element, including ones you never intended to change. A utility class that happens to alter a padding, a colour set by a theme switch, or a property changed by a library then animates as well, at the duration you picked for something else. It also makes the transition impossible to read later, because nothing in the rule says what is supposed to move. Naming the properties costs a few characters and removes a whole class of bug.

Only a few properties are cheap to animate. transform, opacity and, in current browsers, filter can be handled on the compositor, so the element is moved or faded without the page being laid out again. Animating width, height, top, left, margin or padding makes the browser recalculate layout on every single frame, and on a long list or a phone that is where dropped frames come from. If you can express the movement as a translate and a scale instead of a width and a left, do that.

A transition needs a change to react to, and some values cannot be interpolated. Nothing animates on page load, because the element has no previous value. Going from display: none to display: block does not transition either, since the element was not being rendered a moment ago, and the same applies to height: auto and to any keyword with no numeric midpoint. Use max-height, a transform, or the newer allow-discrete behaviour instead of expecting auto to tween.

This page does not measure performance, and the demo states are fixed. The compositor markings in the property list are general guidance, not a reading taken from your machine, and the tool cannot tell you the frame rate your real component will hit. The preview also animates towards a set of built-in target values rather than your own design, so it shows the timing honestly but not your layout. Profile the real thing in the browser devtools when it matters.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

A real property list The commonly animated properties as chips, with the cheap ones marked.

Per property timing Give the fade 150ms and the slide 300ms in one declaration.

cubic-bezier with a curve Four editable numbers and the curve drawn as SVG, plus a few presets.

Hover and click The same transition run two ways, because they often feel different.

Honest warnings The page says when your choice will cause layout work every frame.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Transition Generator

A transition is four pieces of information repeated for each property: what changes, how long it takes, how it is eased, and whether it waits first. Written out that way it is easy. The trouble starts when someone writes transition: all .3s because it is shorter, and then spends an afternoon working out why a menu opening also makes the background colour crawl.

This page makes naming the properties the easy path. The chips are the properties that actually get animated in real interfaces, and each one is marked according to whether the browser can move it on the compositor or has to lay the page out again. Turn on the per property switch and every chip you ticked gets its own duration, delay and easing, which the shorthand supports and almost nobody uses.

The cubic-bezier editor was the part worth doing carefully. The four numbers mean very little on their own, so the curve is drawn as an SVG with the control points and their handles shown, the time axis marked, and the y values allowed to go outside 0 to 1 so that an overshoot can be built deliberately rather than stumbled upon. The demo element then runs the real declaration, on hover and on a class toggle, because a transition that feels right on hover often feels slow on a click.

Frequently Asked Questions

Easing, per property timing, compositing and what will not animate.

It is bad enough to avoid as a habit. The browser has to watch every animatable property, and any property that changes for an unrelated reason animates too, at your duration. In a codebase with utility classes or a theme switch that is a recurring source of odd behaviour. Name the two or three properties that change; the rule stays readable and nothing unexpected moves.

transform, opacity and usually filter are handled by the compositor and do not force a layout pass. Colours and shadows are cheap-ish but still cause painting. width, height, top, left, margin and padding force layout on every frame. A slide is almost always better done as transform: translateX() than as left.

They are the two control points of a curve from (0,0) to (1,1), where x is time and y is progress. x1 and x2 are clamped to 0 to 1 because time cannot run backwards. y1 and y2 are free, so a y above 1 overshoots the end value and comes back, which is how a subtle bounce is made without keyframes. The drawn curve here shows exactly that.

Usually because the element was not rendered before the change, for example it went from display: none to visible in the same frame, so there is no starting value to animate from. Adding the element and its final state in one go has the same problem. Either set the starting state, force a frame, or use transition-behavior: allow-discrete with @starting-style in browsers that support it.

No. The page builds a declaration from the controls and does not parse one back. If you have a transition you want to adjust, read the property names and numbers off it and set them here. That is a genuine limitation of this tool rather than an oversight.