CSS Animation Generator
Build @keyframes animations visually with a live preview, then copy the CSS — entirely in your browser.
Zero means infinite.
Live Preview
Generated CSS
Your Data Never Leaves Your Device
Every tool runs entirely in your browser. Nothing you type is uploaded, stored, or logged on our servers.
The CSS Animation Generator builds @keyframes rules visually. Add stops along the timeline, set opacity and transform values at each one, and tune the animation shorthand — duration, delay, easing, iteration count, direction, and fill mode — while watching the result loop in the preview. Presets for fade, slide, pulse, bounce, and spin give you a working starting point to adjust rather than a blank timeline.
The output deliberately animates only transform and opacity. Browsers can animate those two on the compositor without recalculating layout, which is why they stay smooth where animating width, height, or top causes jank. Transform components sitting at their identity value are left out of the generated CSS to keep it readable, and everything runs in your browser.
FAQ
Copy both parts: the @keyframes block defines the animation, and the .animated rule applies it. Rename .animated to your own selector and the animation runs on that element.
Re-applying the same animation to an element already running it is a no-op in CSS. The Replay button remounts the preview to restart it; in your own code, toggle the class off and on or force a reflow.
It decides what the element looks like outside the animation's run. "forwards" holds the final keyframe after it ends — usually what you want for a fade-in, otherwise the element snaps back to its original state.
Set iterations to zero and the shorthand emits `infinite`. Pair it with the "alternate" direction for a smooth back-and-forth rather than a hard jump at the end of each cycle.
Stick to transform and opacity, which is what this tool generates. Browsers can animate them on the compositor without triggering layout, so they stay smooth where animating width, height, or top would not.
No. The preview and CSS are generated entirely in your browser.