CSS Animation Generator

The CSS Animation Generator produces ready-to-paste keyframe animations without you having to memorise the syntax.

Pick a motion preset — fade, slide, zoom, bounce, spin, pulse or shake — then dial in the duration, delay, easing curve, iteration count, direction and fill mode.

The tool writes both the @keyframes block and the matching animation shorthand, wrapped in a sample .element rule you can drop straight into a stylesheet.

Each preset is a sensible, hand-tuned starting point: the fade presets animate opacity, the slide and zoom presets combine a transform with a fade for a polished entrance, and the looping presets like spin and pulse are designed to read well when repeated.

The timing controls map exactly onto the CSS animation shorthand, so what you see is what the browser runs — duration and delay in seconds, a choice of standard easing functions plus a bouncy back curve, and an infinite-loop toggle for continuous effects.

Invalid settings, such as a zero duration, produce a clear message rather than broken CSS.

Generation happens entirely in your browser.

Nothing is uploaded or saved, the output is plain text you can copy with one click, and the tool works offline once loaded.