Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Transition Generator

Set the property, duration, delay, and timing function, hover a live preview to feel the motion, and copy the transition CSS.

Preview

Hover, focus, or tap the box to play the transition. Everything runs in your browser.

Property

Duration and delay

Timing function

ease-in-out

CSS
transition: all 0.3s ease-in-out;

How to generate a CSS transition

  1. Choose the property

    Pick the property to animate, such as transform, opacity, or background-color, or choose all to transition every property that changes.

  2. Set duration and delay

    Drag the duration slider to set how long the change takes, and the delay slider to set how long the browser waits before it starts.

  3. Pick a timing function

    Choose a timing function preset and watch the small curve preview show how the motion speeds up and settles, including back curves that overshoot.

  4. Preview and copy

    Hover or focus the preview box to play the exact motion, then copy the transition CSS and paste it onto your element.

Why use this tool

Four plain controls

Property, duration, delay, and timing function map one to one to the CSS transition shorthand, so nothing about the output is a surprise.

Hover to play the motion

A live box replays your exact transition on hover, focus, or tap, and it honours the property you chose, so an opacity fade looks different from a transform slide.

Timing presets with a curve preview

Presets cover the browser keywords ease, linear, ease-in, ease-out, and ease-in-out, plus back curves that overshoot for a springy finish, each drawn as a small acceleration curve.

Copy the transition shorthand

The result is a single standard transition declaration in property, duration, timing, delay order, with the delay dropped when it is zero.

Runs entirely in your browser

Everything happens on your device. Nothing is uploaded, and there is no signup.

About this tool

A CSS transition tells the browser to animate a property change over time instead of applying it instantly. This generator builds the transition shorthand from four plain controls: which property to animate, how long it takes, how long to wait before it starts, and the timing function that shapes its speed. As you adjust each one, a live box replays the exact motion on hover, so you can feel the result before you paste a single line into your stylesheet.

Pick a property like transform, opacity, or background-color to animate just that value, or choose all to transition every property that changes. The timing function presets cover the browser keywords ease, linear, ease-in, ease-out, and ease-in-out, plus back curves that overshoot the target for a springy finish, and a small curve preview draws the acceleration so you can see how the motion accelerates and settles. Duration and delay run from 0 to 3 seconds, with the value shown in seconds to match what you copy.

Reach for a transition when a hover, focus, or state change would otherwise snap. Keep durations short, roughly 150ms to 400ms, for interface feedback, and lean on transform and opacity, which are the cheapest properties to animate. When the motion feels right, copy the transition CSS and drop it onto your element. For a fully custom easing curve you can drag, try the cubic bezier generator, and pair the motion with a matching box shadow generator for depth on hover.

Frequently asked questions

What is a CSS transition?
A transition animates a property change over a set duration instead of applying it instantly. It runs when the value changes, most often on hover, focus, or a class toggle, and needs no keyframes.
Which properties can I animate?
The generator covers common animatable properties: transform, opacity, background-color, color, box-shadow, border-color, width, and height, plus all, which transitions every property that changes. Transform and opacity are the cheapest to animate.
What are the back timing functions?
The back presets are timing functions whose curve dips below the start or past the end before settling, so the element overshoots its target and eases back. They give motion a springy, playful feel and are output as cubic-bezier values.
What is the difference between duration and delay?
Duration is how long the change takes to play once it starts. Delay is how long the browser waits after the change is triggered before the animation begins. Both are set in seconds here and each runs from 0 to 3 seconds.
Do CSS transitions work in every browser?
Yes. Transitions and the cubic-bezier timing function are part of standard CSS and are supported by every current browser, so the generated declaration works without prefixes.
Is anything uploaded?
No. The preview, the curve, and the generated CSS all run in your browser. Nothing is sent to a server or stored.

Related tools