CSSAwwwards
+ Submit tool
Built-in toolFree · No signup

CSS Transition Generator

Build CSS transitions with a live animated preview. Choose the property, duration, timing function (including custom cubic-bezier), and delay. Stack multiple transitions, trigger Fade/Move/Scale/Colour demos, and loop the animation to feel the timing.

Live preview

CSS

Transitions (1)

300ms
0ms
all 300ms ease-out
CSS Output
transition: all 300ms ease-out;

How to use

01

Choose a property

Select any CSS property — all, opacity, transform, color, background-color, box-shadow, and more.

02

Set duration & easing

Dial in the duration from 50ms to 3s. Pick from 7 timing functions or write a custom cubic-bezier.

03

Preview it live

Switch between Fade, Move, Scale, Color, or All Together previews. Click Trigger or enable Loop.

04

Stack transitions

Add multiple transition definitions for different properties — each with its own timing and delay.

More CSS animation tools

From our directory of 30+ CSS tools.

Browse all →

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →