New toolFree · No signup

CSS Animation Generator

Build the complete CSS animation shorthand — name, duration, delay, timing function, iteration count, direction, and fill-mode — visually. Start from one of 12 presets (fade, slide, zoom, bounce, spin, pulse, shake) and replay the live preview before copying the @keyframes and animation declaration together.

Share on X LinkedIn

Presets

Animation name

Duration600ms

Delay0ms

Timing function

Iteration count

Direction

Fill mode

Live preview

.element

@keyframes + Animation Output

@keyframes fade-in {  0% {    opacity: 0;  }  100% {    opacity: 1;  }} .element {  animation: fade-in 600ms ease-out 0ms 1 normal both;}

How to use

Pick a preset

Choose from 12 ready-made animations — fade in/out, slide in 4 directions, zoom in/out, bounce, spin, pulse, and shake.

Tune duration & delay

Drag the sliders to set how long the animation runs and how long it waits before starting.

Choose timing, iterations, direction & fill-mode

Pick a timing function (or write a custom cubic-bezier), set how many times it repeats, and control direction and fill-mode.

Replay and copy

Click Replay to restart the live preview. Copy the complete @keyframes block plus the .element animation rule.