CSS Animation Generator

Create CSS keyframe animations from presets (fade, slide, bounce, pulse, spin) with timing controls.

Runs in your browser. Your input is processed on your device and is not uploaded to our server.

Animation

Duration (ms)

Delay (ms)

Easing

Iterations (0 = infinite)

Direction

Fill mode

Class name

CSS

How to use the CSS Animation Generator

Pick a preset animation.
Set duration, delay, easing, iterations and direction.
Copy the @keyframes rule and the animation declaration.

The generated CSS includes a prefers-reduced-motion media query so people who ask their system for less motion are not shown large animations. Animate transform and opacity where possible: they are cheap for the browser to render.

Frequently asked questions

What is prefers-reduced-motion?

A user setting in the operating system asking websites to minimise motion. Respecting it avoids discomfort for people with vestibular disorders.