CSS Animation Generator

The compositor rule: animate transform and opacity, nothing else. These two property groups run on the GPU compositor thread — the browser composites pre-painted layers without touching the main thread, so animation stays at 60fps even while JavaScript is busy. Everything else that affects geometry — width, height, top, left, margin, padding — invalidates layout, and the browser recomputes positions every frame. Our benchmark of a 3,000-element animation: the width version triggered 110 layout passes in 1.8 seconds (273ms of layout work, on top of 213ms of paint); the transform version triggered zero layout passes. The same animation, one property swap, and the tax disappears. That's the full argument for this generator's presets being transform/opacity-only.

Easing is a motion curve, not a mood. ease-out front-loads the movement and decelerates into the resting frame — it reads as a natural arrival and is the right default for entrances. ease-in starts slow and accelerates — good for exits (things leaving feel like they're falling away). linear is constant speed — correct for spinners, wrong for almost everything else, because real objects don't move at constant velocity. For attention-grabbing pops, a slight overshoot like cubic-bezier(0.34, 1.56, 0.64, 1) (this tool's "back-out") gives the springy feel without JavaScript. Duration should scale inversely with the size of the motion: big hero entrances 300-500ms, micro-interactions 100-200ms, decorative loops up to 2s.

Fill-mode is the setting that makes entrance animations work. Without a fill mode, the element returns to its pre-animation style the instant the animation ends — a fade-in appears to flash and vanish. forwards holds the final keyframe's computed values in place after the run ends, which is why every entrance preset in this generator defaults to it. backwards applies the first keyframe during the delay (so a delayed fade-in starts invisible), and both does both. If you've ever seen an entrance animation "blink", it was the missing fill-mode.

The replay gotcha: same name, no restart. Re-applying an animation name to an element doesn't restart it — the browser treats it as already applied. The reliable pattern is remove, force reflow, re-add: el.style.animation = 'none'; void el.offsetHeight; el.style.animation = 'fadeIn 1s ease forwards';. This generator's Replay button does exactly that.

Transitions vs animations — pick by trigger. Transitions animate between two states on a trigger (:hover, class toggle) — perfect for hover effects and state changes. Animations with @keyframes run multi-step sequences on load or loop — entrances, spinners, attention effects. When something must run once on page load, it's an animation, not a transition. When it must react to an interaction, a transition is usually simpler and cheaper.

will-change is a hint, not a performance drug. will-change: transform promotes the element to its own compositor layer ahead of time, which can smooth an animation that's about to start. But each promoted layer costs memory, and too many will-change hints can make pages slower — GPU memory and layer-management overhead — and cause scrollbar jumps. Use it on one or two elements you're about to animate, and remove it when the animation ends. Browsers promote transform/opacity animations automatically, so will-change is rarely needed for the patterns in this generator.

Read the full math in The Layout Tax and its companion The Animation Tax — the measured cost of animating the wrong properties. See also: CSS Grid Generator · Flexbox Generator · CSS Gradient Editor · Box Shadow Generator · All CSS Tools