CSS Animation Generator

Create CSS keyframe animations visually. Start from fade, slide, bounce, pulse, rotate, zoom or shake presets, adjust duration, delay, timing function, iterations, direction and fill mode, replay the live preview, and copy or download the @keyframes and animation CSS.

Developer Runs client-side Free to use

Jump to the tool

About the CSS Animation Generator

CSS Animation Generator builds ready-to-use CSS animations without writing keyframes by hand. Choose a preset — fade, slide, bounce, pulse, rotate, zoom or shake — and edit its settings, such as the start opacity, slide direction and distance, bounce height, pulse scale, rotation angle, zoom start scale or shake distance. Then set the duration, delay, timing function, number of iterations (or infinite), direction and fill mode.

The live preview plays exactly the generated keyframes and animation values, and Replay restarts it at any time. The output contains a named @keyframes rule and an animation shorthand on a .animated class, plus an optional prefers-reduced-motion rule that switches the animation off for people who ask their device for less motion. Copy the CSS or download it as a .css file.

How to use

Choose an animation preset and adjust its settings.
Set the duration, delay, iterations, timing function, direction and fill mode.
Watch the preview and click Replay to see it again.
Rename the keyframes if needed and keep the reduced-motion rule on.
Copy the CSS or download it as animation.css.

Key features

Seven editable presets: fade, slide, bounce, pulse, rotate, zoom and shake.
Duration, delay, iterations or infinite, direction and fill mode.
Common timing functions including a back/overshoot curve and steps().
Live preview with Replay.
Optional prefers-reduced-motion rule.
Copy CSS, download .css and full Reset.

Best practices

Keep interface animations short — around 150–400 ms for most transitions.
Animate transform and opacity for smooth performance.
Avoid infinite animations on content people need to read.
Respect prefers-reduced-motion for accessibility.
Use a descriptive keyframes name that will not clash with others in your stylesheet.

Benefits

Working animations in seconds without memorising syntax.
See the effect before adding it to your project.
Accessible output with a reduced-motion option.
No uploads, accounts or libraries.

Frequently asked questions

How do I use the generated CSS?

Paste the CSS into your stylesheet and add the class animated to the element you want to animate, or copy the animation line into your own selector.

What does fill mode do?

Fill mode controls the styles before and after the animation runs. forwards keeps the last keyframe after it ends, backwards applies the first keyframe during the delay, and both does both.

What is the difference between direction values?

normal plays from start to end, reverse plays backwards, alternate switches direction on each iteration, and alternate-reverse starts backwards and then alternates.

Why include a prefers-reduced-motion rule?

Some people experience discomfort from motion and ask their device to reduce it. The optional rule turns the animation off for them while keeping it for everyone else.

Can a negative delay be used?

Yes. A negative delay starts the animation part-way through, as if it had already been running for that long.

Why can’t I use any name for the keyframes?

Names must be valid CSS identifiers, so they are limited to letters, digits, hyphens and underscores and cannot be reserved words such as none. This also keeps the preview safe.

Is anything uploaded or saved?

No. The CSS is generated by JavaScript in your browser. Settings and any image you choose stay on your device and are not saved in browser storage; Reset clears them.