CSS Keyframe Animation Generator

What this CSS animation generator does

Writing a @keyframes rule from scratch means remembering percentage syntax, picking transform values that don't look janky, and then tuning five separate animation properties just to get the timing right. This tool skips the trial and error: pick one of 15 common motions — fade, slide from any direction, zoom, bounce, pulse, shake, wobble, rotate, flip, or swing — adjust duration, delay, easing, iteration count, direction, and fill mode, and watch it play on a live preview shape before you ever touch your stylesheet.

Every control maps directly to a real CSS animation property, so what you see in the preview box is exactly what you'll get in production: animation-duration, animation-delay, animation-timing-function (including a built-in "back" easing with overshoot via cubic-bezier), animation-iteration-count, animation-direction, and animation-fill-mode are all exposed, not hidden behind a simplified "speed" slider.

How to use it

Choose a preset and preview shape, then adjust the timing controls below — the preview box replays automatically on every change, or hit "Replay" to trigger it manually. Once it looks right, copy the generated CSS block: it includes both the @keyframes definition and a ready-to-use .animated-element class you can rename and apply to anything on your page.

A real example

Say you're building a "new feature" badge that needs to catch the eye without being annoying — pick Pulse, set duration to 1.5s, iteration count to infinite, and easing to ease-in-out. That gives a smooth breathing effect rather than a jarring pop. Switch to Shake with a 1-iteration count instead for a form-validation error state that plays once and stops.

Frequently asked questions

Can I use more than one animation on the same element?

Yes — CSS supports comma-separated animation lists (animation: anim1 1s, anim2 2s;). Generate each animation separately here and combine the shorthand values manually if you need to layer two motions on one element.

Why does my animation not restart when I click Replay twice quickly?

Browsers won't restart a CSS animation that's already running unless there's a reflow in between — this tool forces that reflow internally, so Replay always works, but if you're copying the generated CSS into your own JS-triggered replay logic, you'll need the same trick (toggle animation: none, force a layout read, then reapply).

What's the difference between animation-fill-mode values?

forwards keeps the animation's final keyframe state after it ends; backwards applies the first keyframe's state during any delay before it starts; both does both; none reverts to the element's normal styling once the animation finishes.

Will these animations work on older browsers?

CSS @keyframes and the animation-* properties have been supported in all modern browsers (Chrome, Firefox, Safari, Edge) without vendor prefixes for years — no prefixing needed for current browser support.

Does this affect page performance?

All the presets here animate transform and opacity, the two properties browsers can animate on the GPU compositor without triggering layout recalculation — the cheapest possible way to animate on the web.