CSS Animation Generator
Generate CSS @keyframes animations from 22 presets — entrances, exits and attention seekers — or write your own keyframes. Live preview, free, in your browser.
Edit the keyframes
Write your own stops and properties, or paste an existing @keyframes block and press Import.
@keyframes my-animation {
from { opacity: 0; }
to { opacity: 1; }
}
.my-animation {
animation: my-animation 1s ease 0s infinite;
}🔒 Generated in your browser — nothing is uploaded.
The @keyframes rule and its class
Pick one of 22 presets — entrances, exits and attention seekers — then tune the duration, timing function, delay, iteration count, direction, fill mode and play state, and copy a self-contained block of CSS: a @keyframes rule plus the class that applies it. The timing function can be a curve of your own (cubic-bezier() with four control points) or a steps() whose count and jump term you choose, and the duration and delay can be typed rather than dragged, so a thirty-second ambient loop is one keystroke away. The live preview replays on demand on a square, a circle, a line of text, a card or a picture, so you can see how the motion feels on the thing you are actually animating.
Your own keyframes, or one you already have
Open Edit the keyframes to write your own percentage stops and properties on top of any preset, or paste an existing @keyframes block and press Import — its name and its frames are read back in and re-printed. Anything that is not a valid set of keyframes is refused rather than copied, and the whole configuration, hand-written frames included, is kept in the page's link.
Pure CSS, no JavaScript
Every preset is built from a standard CSS @keyframes animation applied to one element. There are no libraries, no build step and no runtime — paste the CSS into any project, rename the animation to match your markup, and it just works.
Frequently asked questions
How do I use the generated animation?
Copy the CSS, then add the generated class to any HTML element. The @keyframes block and the class are copied together, so nothing else is required.
Can I loop the animation forever?
Yes. Set the iteration count to Infinite and the animation repeats continuously; choose a number instead to run it a fixed number of times.
Can I make the animation alternate, or keep its final state?
Yes. Direction offers normal, reverse, alternate and alternate-reverse, and Fill mode offers none, forwards, backwards and both — set it to forwards or both and a one-shot fade stays faded in instead of snapping back to opacity 0. Both are written into the copied animation shorthand only when they differ from the CSS default, so an animation that does not use them copies the same short line it always did.
Can I edit the keyframes, or import my own?
Yes. Edit the keyframes takes your own percentage stops and properties on top of any preset, and pasting an existing @keyframes block and pressing Import reads its name and frames straight back in. Anything that is not a valid set of keyframes is refused rather than copied, so the block you paste out always parses.