CSS Animation Generator
A CSS animation generator writes the @keyframes rule and the animation properties for you. Pick one of the 16 presets, move the Duration and Delay sliders and choose an iteration count, direction, timing function and fill mode; the preview square animates live and the CSS code box updates. Click bounce and the shorthand line reads animation: bounce 1s ease 0s infinite normal;
Animation Properties
CSS code
CSS Animation Generator
Generate CSS animations instantly with our visual animation builder. Choose from 16 built-in presets including bounce, shake, pulse, fade, slide, rotate, flip, swing, rubber band, jello, heartbeat, flash, and zoom. Customize every animation property: duration, delay, iteration count, direction, timing function, and fill mode. Copy production-ready CSS code.
Popular Tools
About CSS Animation Generator
This generator builds a complete CSS keyframe animation from a visual panel, so you never have to remember the property order. Sixteen presets are provided — bounce, shake, pulse, fadeIn, fadeOut, slideInLeft, slideInRight, slideInUp, rotate, flip, swing, rubberBand, jello, heartBeat, flash and zoomIn — and each button is labelled with the exact @keyframes identifier it writes. Clicking a preset also copies that identifier into the Animation name field, which you can then change to anything your stylesheet needs.
Six controls shape the result. Duration runs from 0.1 to 5 seconds in tenths, Delay from 0 to 3 seconds. Iteration count offers 1, 2, 3, 5 or infinite. Direction covers normal, reverse, alternate and alternate-reverse, timing function covers ease, ease-in, ease-out, ease-in-out, linear, step-start and step-end, and fill mode covers none, forwards, backwards and both. Every option is written with the CSS keyword itself, so the dropdown and the generated code always say the same word.
Two outputs appear side by side with the preview. The Shorthand line is the single animation property in the order name, duration, timing, delay, iteration-count, direction and — when it is not none — fill-mode. The CSS code block below is the long form: the full @keyframes rule plus an .animated-element class with one longhand property per line. The Copy button copies the long form.
What it does not do: it animates one element with one keyframe rule and does not chain sequences, scroll-linked timelines or CSS transitions. Rename .animated-element to your own selector after pasting, and remember that a visitor with reduced-motion turned on should be served a prefers-reduced-motion media query, which you have to add yourself.
Use Cases
How to use
Click one of the 16 preset buttons at the top. Each button shows the @keyframes name it will write, and the preview square starts animating immediately.
Set the Duration and Delay sliders. Duration ranges from 0.1 to 5 seconds and Delay from 0 to 3, both in tenths of a second.
Choose an iteration count and a direction, then a timing function and a fill mode. Every option is shown with the CSS keyword it produces.
Change the Animation name field if you need an identifier that fits your stylesheet, for example loaderPulse instead of pulse.
Watch the preview square, then read the Shorthand line for the one-property version or the CSS code panel for the full @keyframes rule.
Press Copy to put the long-form CSS on your clipboard and paste it into your stylesheet, renaming .animated-element to your own selector.
Pro Tips
- Clicking a preset overwrites whatever is in Animation name with the preset identifier. Rename the animation after choosing the preset, not before, or your name will be replaced.
- Delay is written into the shorthand even when it is 0s, but the long-form CSS omits animation-delay entirely while the slider is at zero. The two outputs are equivalent, not identical.
- Fill mode none is the default and is likewise left out of the long form. Choose forwards if the element must keep the state of the last keyframe once the animation ends.
- The duration slider stops at 5 seconds and steps in tenths. For anything slower, copy the code and edit the animation-duration value by hand; nothing else has to change.
- Pair alternate with an iteration count of 2 to get a there-and-back movement that ends where it started. With infinite and normal the element jumps back to the first keyframe on every loop.
Troubleshooting
The animation name I typed disappeared.
Clicking a preset button sets the Animation name field to that preset's identifier, so a name typed earlier is overwritten. Choose the preset first, then type your own name into Animation name; the preview and both code outputs follow it immediately.
The pasted CSS does nothing on my page.
The rule targets the class .animated-element, which probably does not exist in your markup. Either add that class to the element or rename the selector in the pasted code. The @keyframes block above it must stay, because the animation-name refers to it.
The element snaps back to its starting position when the animation ends.
That is the default fill mode none: outside its running time the element uses its normal styles. Set Fill mode to forwards so it keeps the last keyframe, or to both if it should also adopt the first keyframe during the delay.
Frequently Asked Questions
Declare a @keyframes rule with the states you want, then point an element at it with the animation properties. This generator does both: pick a preset, set duration, delay, iteration count, direction, timing function and fill mode, and copy the CSS code panel, which contains the @keyframes block plus an .animated-element class.
One property that holds them all, in the order name, duration, timing-function, delay, iteration-count, direction and fill-mode. The Shorthand line here writes exactly that: the page opens on animation: myAnimation 1s ease 0s infinite normal;, and clicking a preset swaps the name. Fill-mode is appended only when it is not none.
Sixteen: bounce, shake, pulse, fadeIn, fadeOut, slideInLeft, slideInRight, slideInUp, rotate, flip, swing, rubberBand, jello, heartBeat, flash and zoomIn. Each button carries the identifier that will appear in the generated @keyframes rule, and clicking it copies that identifier into the Animation name field.
It decides how the element looks outside the animation's running time. none, the default, leaves the element with its normal styles. forwards keeps the last keyframe once the animation ends, backwards applies the first keyframe during the delay, and both does the two together.
ease starts slowly, speeds up and slows down again, which is why it is the CSS default; linear moves at one constant speed from start to finish. Switch the Timing function dropdown between them and watch the preview square: on a rotate preset the difference is very visible.
Set Iteration count to infinite, which is the value this generator starts with. The dropdown also offers 1, 2, 3 and 5. In the copied CSS this becomes animation-iteration-count: infinite, and in the shorthand it is the fifth value on the line.
Yes. The Animation name field feeds both the @keyframes identifier and the animation-name property, so they can never disagree. Choose your preset first, because clicking a preset button replaces whatever is in the field with the preset's own identifier.
For simple movement, yes in practice: transform and opacity animations can be handled by the compositor without recalculating layout, and no script has to run each frame. Anything that needs logic, chained sequences or user input still belongs in JavaScript.
The properties used here — @keyframes, animation-name, duration, delay, iteration-count, direction, timing-function and fill-mode — are unprefixed CSS supported by every current desktop and mobile browser. No vendor prefixes are written, and none are needed for the presets on this page.
Wrap the animation in a media query. Paste the generated code, then add @media (prefers-reduced-motion: reduce) { .animated-element { animation: none; } } so people who have asked their system for less movement do not get it. The generator does not add that rule for you.