CSS Keyframe Animation Generator
Generate CSS @keyframes animations (pulse, float, bounce, spin, shake) with a live preview, adjustable duration, timing.
Generated CSS
@keyframes kf-pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.08); opacity: 0.85; }
100% { transform: scale(1); opacity: 1; }
}
.pulse-animation {
animation-name: kf-pulse;
animation-duration: 1.2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: normal;
}
About this tool
How to use it
- Pick an animation preset (Pulse, Float, Bounce, Spin, Shake) — the preview box updates instantly.
- Adjust duration, timing function, iteration count, and direction to fine-tune the motion, watching the preview to judge the result rather than guessing.
- Click Generate Animation, or just keep adjusting — the preview and the generated CSS both update live.
- Copy the CSS block and paste it into your stylesheet: it's a complete @keyframes rule plus a ready-to-use class.
Why it matters
CSS animation timing is hard to judge from the numbers alone — 0.3s and 0.6s look identical in a text editor but very different in motion, and the wrong easing curve can make an otherwise correct animation feel mechanical or jarring. Seeing it move before committing to the CSS saves the edit-save-reload loop of tuning it directly in a browser.
When to use it
Adding a subtle attention cue (pulse, float) to a button or notification badge. Building a loading spinner (spin) or an error-shake (shake) for form validation feedback. Learning what each CSS animation-* property actually controls by changing one at a time and watching the effect.
Good to know
Every preset is a real, standard CSS @keyframes pattern (the same shapes used across most UI component libraries) — pulse (scale + opacity), float (vertical drift), bounce (a multi-stop drop-and-settle), spin (rotation), shake (rapid horizontal oscillation, commonly used for form-error feedback). The generated CSS is exactly what the preview runs on, not a simplified or approximated version — copying it reproduces the preview's motion exactly, assuming the target element allows CSS transforms (some layout contexts restrict transform-origin behavior on inline elements, for example).
Common questions
Will the generated CSS look exactly like the preview?
Yes — the preview box runs the exact same @keyframes and animation-* properties shown in the output, not a simplified stand-in. Applying the copied CSS to an element with the same display type (block or inline-block) will reproduce the same motion.
Why does my animation only play once instead of looping?
Check the Iteration count setting — it defaults per preset but is fully adjustable; set it to "infinite" for a continuous loop, or a specific number (1, 2, 3) for a fixed number of repeats.
What's the difference between "alternate" and "reverse" direction?
"Reverse" always plays the keyframes backwards, every cycle. "Alternate" plays forward on odd cycles and backward on even cycles, which is what makes a repeating animation (like a pulse or float) feel like it smoothly reverses instead of snapping back to the start each loop.
Can I use these animations on any HTML element?
Yes, though `transform`-based animations (all five presets use `transform`) need the element to participate in layout normally — they work on block, inline-block, and flex/grid items, but a plain inline element (like a <span> with no display change) may not respond to transform in every browser.
Why does the animation reset when I change a setting?
This is intentional — the preview removes and re-applies the animation class whenever you change a setting, so you always see the current settings from the start of the animation rather than a stale mid-animation state.