The CSS Animation Generator creates ready-to-use @keyframes animations. Pick an effect — fade, slide, zoom, spin, bounce, shake, flip, and more — then tune the duration, timing function, delay, iteration count, direction, and fill mode while a live preview plays the result. Copy the complete @keyframes rule and animation shorthand straight into your stylesheet.
Unlike a transition, which animates a property only when its value changes, an animation runs a defined sequence of keyframes on its own and can loop, reverse, and alternate. This generator writes both the @keyframes block and the animation property for you. Everything runs in your browser.
How to use the CSS animation generator
- Choose an animation from the library to load its keyframes and play it in the preview.
- Adjust the duration and timing function, and set a delay if you want the animation to start later.
- Set the iteration count (including infinite), direction, and fill mode to control how it repeats and where it rests.
- Copy the generated @keyframes and animation CSS, then apply the rule to your element (rename “.element” as needed).
Keyframes and the animation shorthand
A CSS animation has two parts. The @keyframes rule defines the sequence — the states at 0% (from), 100% (to), and any points in between. The animation property then attaches that sequence to an element and controls its playback: name, duration, timing function, delay, iteration count, direction, and fill mode, in that order. This tool keeps the two in sync so the copied CSS always matches the preview.
Iteration, direction, and fill mode
Iteration count sets how many times the animation runs — use “infinite” for loaders and continuous effects like spin or pulse. Direction controls whether each run plays forward, in reverse, or alternates back and forth (great for a smooth ping-pong effect). Fill mode decides what the element looks like before and after the animation: “forwards” keeps the final keyframe, “backwards” applies the first keyframe during any delay, and “both” does each — useful so a fade-in does not snap back to invisible when it finishes.
Animations vs. transitions
Reach for a transition when you just need to animate between two states triggered by an event like hover or focus. Reach for an animation when you need a multi-step sequence, looping, or motion that starts on its own without a trigger. Both are GPU-friendly when they animate transform and opacity, which are the properties most of these presets use for smooth performance.
Frequently Asked Questions
What is the difference between a CSS animation and a transition?
A transition animates a property only when its value changes (for example on hover) and goes from one state to another. An animation runs a defined @keyframes sequence on its own, can have multiple steps, and can loop, reverse, or alternate.
How do I make an animation loop forever?
Set the iteration count to “infinite”. Combine it with direction “alternate” for a smooth back-and-forth effect, which works well for pulse, bounce, and similar loops.
What does fill mode do?
Fill mode controls the element’s style outside the animation’s run. “forwards” keeps the last keyframe after it ends, “backwards” applies the first keyframe during the delay, and “both” does both — so, for example, a fade-in stays visible instead of resetting.
Can I change the animation name or target element?
Yes. The output uses a generic “.element” selector and the preset’s name — rename either to fit your project. Just keep the @keyframes name and the name in the animation shorthand the same.
Why is there no Tailwind output?
Tailwind animations require the keyframes to be registered in your tailwind.config, so there is no clean one-line arbitrary class. Copy the @keyframes into your global CSS (or your Tailwind config) and reference it, and the generated CSS works as-is.
Do CSS animations work in all browsers?
Yes. @keyframes and the animation property are supported in all modern browsers, so the generated CSS works everywhere without vendor prefixes.