CSS Animation Generator is a free online tool for creating CSS @keyframe animations with a live preview. Select from 16 animation presets — fade in/out, slide in from all four directions, bounce, zoom in/out, rotate, pulse, shake, flip, heartbeat, and swing — then fine-tune duration, delay, timing function, iteration count, direction, and fill mode with sliders and dropdowns that update the preview instantly.
A CSS @keyframes rule defines a sequence of styles at points along an animation's timeline, expressed either as from/to (equivalent to 0% and 100%) for simple two-state transitions, or as explicit percentages (0%, 50%, 70%, 100%) for anything with intermediate states — which is exactly why bounceIn needs four keyframe stops to get its overshoot-and-settle motion right, while a plain fadeIn only needs two. Writing these by hand means tracking percentage math and remembering which transform functions compose correctly; this tool handles that and lets you focus on the timing.
The five settings you control — duration, delay, timing-function, iteration-count, and direction — combine into the single animation shorthand property applied to an element. Timing functions matter more than they might seem: linear produces mechanical, constant-speed motion appropriate for spinners, while ease-out (or a custom cubic-bezier for a bounce/overshoot feel) reads as far more natural for anything meant to draw attention, like an entrance or a button press. fill-mode is the setting most people get wrong when hand-writing keyframes — without fill-mode: forwards, the browser snaps an element back to its pre-animation styles the instant the animation finishes, which looks like a bug on any fade-in or slide-in effect.
Scroll Trigger mode solves a different problem — effectively acting as a CSS animation on scroll generator: playing an animation only once an element scrolls into view, rather than immediately on page load. Rather than wiring up a scroll event listener (which fires dozens of times per second and needs manual throttling to avoid janking the page), this mode generates a complete IntersectionObserver setup — the same modern browser API used by lazy-loading images and infinite-scroll implementations — that fires exactly once per element crossing your chosen viewport threshold, with zero external dependency on a library like AOS or ScrollReveal.
Every preset here animates only transform and opacity, deliberately. Those two properties are the only ones a browser can animate purely on the GPU compositor thread without triggering a full layout recalculation, which is why they stay smooth even on lower-powered devices — animating width, height, or top/left instead would visibly stutter under the same conditions. Everything runs and renders in your browser; no animation data or generated code is ever sent to a server.
Minifying the generated CSS before shipping it? CSS Compressor strips the whitespace out in one paste.
