CSS Animation Generator
Pick a preset and settings and get ready-to-paste keyframes plus a live preview.
Keyframes are prefixed ca- so they cannot collide with animation names already in your stylesheet.
What this tool does
A CSS animation generator turns a chosen motion into copyable CSS. Select the preset - fade-in, slide-up, zoom-in, pulse, spin, bounce or shake - set the duration, delay, timing function, iteration count and direction, and you get the @keyframes block, the animation line that uses it, and a prefers-reduced-motion rule that switches it off for visitors who ask for that. A preview box on the page plays the same CSS and can be replayed on demand, so the motion is judged before it is pasted anywhere.
Turns a preset - fade-in, slide-up, zoom-in, pulse, spin, bounce or shake - into keyframes CSS.
Takes duration, delay, easing, iteration count and direction as plain inputs.
Plays the result in a live preview box that replays whenever you press Replay.
Adds a prefers-reduced-motion snippet so the animation can be switched off safely.
How to use it
- Choose the preset the keyframes should be written for.
- Set the duration and the delay in seconds.
- Pick the timing function, how many times it runs and which direction it plays.
- Watch the preview box and press Replay preview to see the motion again.
- Copy the CSS - keyframes, animation line and reduced-motion rule together.
Why use this tool
Motion is the part of a stylesheet that is hardest to judge from code. The easing name, the number of milliseconds and the distance of a translate are abstract until something actually moves, and adjusting them one line at a time in a browser devtools panel is slow. Setting the numbers while a box replays the exact CSS you will paste removes that gap, and the reduced-motion rule is included from the start rather than added after someone complains.
Why we built it
We built this CSS animation generator because the same seven motions get retyped from project to project, and the shorthand is easy to get wrong - the delay sits where the duration looks like it should, and the fill mode is what stops a box flashing at its resting position before the animation starts. Generating all three pieces together - keyframes, animation line and reduced-motion rule - means they cannot drift apart. The CSS Flexbox Generator and CSS Grid Generator handle the layout around the motion, and the Responsive Breakpoint Generator writes the media queries the same way.
For a shape to animate, build one first with the SVG Shape Generator.
Who this tool is for
- Front-end developers adding a first-pass motion to a component
- Designers checking how a transition feels before specifying it
- Students learning what each shorthand value actually does
- Anyone who wants the reduced-motion fallback written for them
What each preset animates
| Preset | What moves | Typical use |
|---|---|---|
| fade-in | opacity 0 to 1 | Something appearing quietly |
| slide-up | opacity plus translateY | Cards, banners and menus arriving |
| zoom-in | opacity plus scale | A modal or a badge popping into place |
| pulse | scale out and back | Drawing attention to one element |
| spin | rotate through 360 degrees | Loaders and indicators |
| bounce | translateY out and back twice | A playful accent or a scroll hint |
| shake | translateX out and back | Error and validation feedback |
A worked example
Load the sample: slide-up, 0.8 second duration, 0.2 second delay, ease-out, three runs, alternating direction. The summary and the generated line read:
| Setting | Value |
|---|---|
| Preset | slide-up |
| Duration | 0.8 s |
| Delay | 0.2 s |
| Timing function | ease-out |
| Iterations | 3 |
| Direction | alternate |
| Animation line | animation: ca-slide-up 0.8s ease-out 0.2s 3 alternate both; |
What you enter, and what you get back
| Item | Details |
|---|---|
| Preset | One of seven motions, from fade-in to shake. |
| Timing | Duration, delay, timing function, iterations, direction. |
| Preview | A box playing the generated CSS, replayable on demand. |
| Result | Keyframes, animation line and reduced-motion rule, copied as one block. |
The generated keyframes are prefixed ca- so they cannot collide with animation names already in your stylesheet. Rename the class and the keyframes name to match your project.
Issues you may run into
| What you see | Why it happens | What to do |
|---|---|---|
| Nothing moves in the preview | Your system asks for reduced motion. | The reduced-motion rule is doing its job - the CSS is still correct. |
| The element jumps at the end | No fill mode, so the resting styles apply after the last frame. | Keep the both fill mode the generator writes in the animation line. |
| The motion starts too late | The delay value is applied before the first frame. | Lower the delay, or set it to 0 for an immediate start. |
| It never stops repeating | Iterations are set to infinite. | Choose a finite count, or accept the loop for a spinner. |
| A second animation is missing | The generated rule replaces the animation property. | Add your other animation to the same declaration, comma separated. |
Assumptions and limitations
- Seven presets are generated; anything else must be written by hand.
- One animation property is written per rule, so combining several means editing the line.
- The preview plays the generated CSS at its own scale - timing is exact, distances are not your layout.
- Keyframes are namespaced with a ca- prefix, which you will want to rename inside your project.
Frequently asked questions
How do I turn a preset into CSS?
Choose the preset, set duration, delay, easing, iterations and direction, and the tool writes the keyframes block, the animation line that uses it and a reduced-motion rule that turns it off.
Which timings can I set?
Duration and delay in seconds, the timing function from ease and linear through to steps, an iteration count of 1, 2, 3 or infinite, and a direction of normal, reverse, alternate or alternate-reverse.
Why is there a reduced-motion snippet?
Many visitors ask their system to limit animation. The media query switches the effect off for them while everyone else still gets the motion - a default that should ship with every animation.
How do I replay the preview?
Press Replay preview. It restarts the same CSS the copy button returns, so what you judge is exactly what you paste.
Can I use this on an SVG shape?
Yes. Anything with a class can take the rule - build the shape with the SVG shape generator, give the element a class, and apply the generated animation line to it.
Is the CSS animation generator free?
Yes, completely free with no account and nothing uploaded. The CSS is generated in your browser and disappears with the tab.