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)

CSS Property

Duration300ms

Delay0ms

Timing function

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.

Animista preview

Animista

Browse, customise, and export ready-made CSS animations on demand.

#animation#keyframes#transitions

Keyframes.app preview

Keyframes.app

Visual CSS animation timeline editor with shadow, color, and easing tools.

#animation#keyframes#timeline

CSS Loaders preview

CSS Loaders

600+ pure CSS loading spinners and animations, copy in one click.

#loaders#spinners#animation

Whirl CSS preview

Whirl CSS

100+ pure CSS loading animations with a searchable, copyable library.

#loaders#animation#spinners

Magic Animations preview

Magic Animations

CSS animation library with dramatic, attention-grabbing entrance effects.

#animation#library#effects

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →