CSS Animation Generator
Build CSS keyframe animations visually. Pick a preset like fade, slide, bounce, pulse, spin, or shake, tune the duration, timing function, delay, iteration count, and direction, watch a live preview run the animation, and copy the full @keyframes and animation CSS.
The CSS Animation Generator is a free visual tool for building CSS keyframe animations. Choose a ready-made preset such as fade, slide, bounce, pulse, spin, or shake, then tune the duration, timing function, delay, iteration count, and direction with simple controls. A live preview box runs your animation as you change settings, and the tool writes out the full @keyframes block and animation shorthand so you can copy it straight into your stylesheet. Everything runs in your browser with no sign-up.
What is a CSS animation generator?
CSS animations move an element between styles defined in a set of @keyframes, driven by the animation property. Writing them by hand means typing out the keyframe percentages and remembering the order of the animation shorthand values. This generator gives you a preset library of common animations and a control for each part of the animation property, applies the result to a live preview element, and prints the matching @keyframes and animation CSS for you to copy.
How to use the CSS animation generator
Creating an animation takes only a few steps:
- Pick an animation preset such as fade, bounce, pulse, or spin.
- Set the duration in seconds for how long one cycle of the animation lasts.
- Choose a timing function like ease, linear, ease-in-out, or a cubic-bezier curve.
- Add a delay, an iteration count or infinite, and a direction such as alternate.
- Watch the live preview, then copy the generated @keyframes and animation CSS.
How does the CSS animation shorthand work?
The animation shorthand bundles several longhand properties in one line. In this tool the order is name, duration, timing-function, delay, iteration-count, and direction. The name points at the @keyframes block, the duration sets one cycle length, and the timing-function shapes the speed curve. The delay waits before the animation starts, the iteration-count repeats it a number of times or forever with infinite, and the direction controls whether each cycle plays forward, in reverse, or alternates back and forth.
What do iteration count and direction do?
Iteration count is how many times the animation runs. A whole number plays it that many times, while infinite loops it forever, which is ideal for spinners and pulses. Direction decides how each cycle plays: normal runs forward, reverse runs backward, alternate flips between forward and backward on each cycle, and alternate-reverse starts backward and then alternates. Combining infinite with alternate is a common way to make a smooth back-and-forth effect.
Why use this CSS animation generator?
- 100% free with no ads, sign-up, or limits.
- A preset library covering fade, slide, bounce, pulse, spin, shake, and more.
- Live preview element that actually runs your animation as you tweak it.
- Controls for duration, timing function, delay, iteration count, and direction.
- Outputs the full @keyframes block plus the animation shorthand, ready to copy.
- Runs entirely in your browser, so nothing is uploaded.
Frequently asked questions
Is the CSS animation generator free?
Yes. Every tool on ToolsSoup is completely free, with no account, sign-up, or hidden limits.
Does the generated animation CSS work in all browsers?
Yes. The animation property and @keyframes are supported in every modern browser, including Chrome, Firefox, Safari, and Edge, so the CSS this tool produces works without vendor prefixes.
How do I make an animation loop forever?
Tick the Infinite option for the iteration count. That sets the iteration-count to infinite in the generated CSS, so the animation repeats endlessly, which is what you want for spinners, pulses, and loading indicators.
Is my data uploaded anywhere?
No. The generator runs entirely in your browser, so nothing you configure is sent to or stored on any server.