Which animation types are supported?

Five built-in presets: fade (opacity), slide (translateX), bounce (keyframed translateY), rotate (full turn) and pulse (scale). Each emits a clean @keyframes block you can rename freely.

Can I use a custom cubic-bezier?

Yes — the timing-function dropdown includes a bounce-bezier preset and you can paste any cubic-bezier(...) value directly. Standard keywords (ease, linear, ease-in-out) are also available.

What does the Replay button do?

It re-mounts the preview element via a React key change so the animation restarts from 0% even when set to a finite iteration count.

Is the @keyframes output copied too?

Yes — the Copy button grabs the @keyframes block followed by a `.animated { animation: … }` rule, so you can drop it straight into your stylesheet.

Are these animations GPU-friendly?

Yes. All five animate only transform and opacity, which run on the compositor thread and avoid layout thrash.

CSS Animation Generator

Build fade, slide, bounce, rotate & pulse animations — copy @keyframes live.

100% private — no uploads Design & CSS ToolsFree & unlimited Read tutorial

See how it works

Watch a quick simulation of this tool in action — no file needed.

How to use CSS Animation Generator

Follow these steps — everything happens instantly in your browser.

1
Step 1. Pick an animation type: fade, slide, bounce, rotate or pulse.
2
Step 2. Set the duration and choose a timing function (ease, cubic-bezier, steps…).
3
Step 3. Toggle infinite loop or set a fixed iteration count.
4
Step 4. Use Play / Pause / Replay to scrub the live preview element.
5
Step 5. Copy the generated @keyframes + animation CSS into your stylesheet.