What does the generated CSS include?

It outputs a named @keyframes rule and a matching .element selector using the animation shorthand, so you can paste both straight into your stylesheet.

How do I make an animation play only once?

Set the iterations field to 1 instead of infinite. You can also enter any positive number to repeat the animation that many times.

What does the animation shorthand order mean?

The shorthand is animation: name duration timing-function delay iteration-count direction fill-mode. This generator fills each slot from your settings so you can paste a single line.

How do I keep an element in its final animated state?

Set fill-mode to forwards. That tells the element to retain the styles from the last keyframe after the animation finishes, instead of snapping back to its original state.

Is anything uploaded?

No — the preview and CSS are generated entirely in your browser.

CSS Animation Keyframes Generator

This tool generates ready-to-paste CSS @keyframes animations with a live preview. Pick an effect — fade in, slide up, scale in, bounce, pulse, spin or shake — then tune the timing and behaviour, and copy a complete @keyframes rule plus the animation shorthand. It saves you hand-writing keyframe percentages and remembering the shorthand order.

How it works

Each preset defines its keyframes as percentage steps (for example fade-in is 0% { opacity: 0 } to 100% { opacity: 1 }). The tool emits that named @keyframes block, then builds the animation shorthand from your controls in the correct order:

animation: name duration timing-function delay iteration-count direction fill-mode;

You adjust duration, timing function (ease, linear, etc.), delay, iteration count (a number or infinite), direction (normal, alternate, reverse) and fill mode (forwards keeps the final state). The preview replays on demand so you can see the exact result.

Example

A fade-in over 0.6s with ease-out, running once and holding its final state, produces:

@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
.element { animation: fade-in 0.6s ease-out 0s 1 normal forwards; }

Paste both into your stylesheet and the element fades in once and stays visible. Everything runs locally in your browser — nothing is uploaded.

The output gives you a complete @keyframes rule plus the animation shorthand. Everything runs locally in your browser — nothing is uploaded.