Build CSS animations with live preview

What does the CSS animation builder do?

The builder creates CSS keyframe animations visually. Per keyframe you set the offset (0–100 %) and the properties — translateX, translateY, scale, rotate, opacity, color, backgroundColor, filter. A live preview plays the result instantly, a replay button restarts the animation, and a slow-motion toggle triples the duration for precise debugging.

31 preset animations cover the classic patterns: entrance effects (Fade In, Slide In, Zoom In, Flip In X), attention triggers (Pulse, Heartbeat, Shake, Wiggle, Soft-bounce, Tada, Rubber-band), and exit animations (Fade Out, Slide Out, Zoom Out, Collapse). Every preset is composited-friendly — no hidden width or height animations buried in the stack.

The output comes in three formats: plain CSS with an @keyframes block and animation: shorthand, a Tailwind v4 @theme block for class="animate-name" usage, or a Web Animations API JavaScript snippet for programmatic control. All three are paste-ready and include the auto-emitted @media (prefers-reduced-motion) block.

Why is prefers-reduced-motion mandatory?

WCAG 2.2 success criterion 2.3.3 “Animation from Interactions” requires that animations triggered by user interaction can be disabled. Browsers implement this through the CSS media query prefers-reduced-motion, which mirrors the OS setting: macOS “Reduce motion”, Windows “Show animations”, iOS “Reduce motion” in Accessibility.

Ignoring it excludes two large groups: people with vestibular disorders (large motion triggers dizziness and nausea) and people with attention disorders (animated content keeps pulling focus). The generator does not leave the fallback optional — every output ships with:

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

Four strategies are available: none disables the animation entirely, opacity-only reduces it to a pure fade with no motion, instant runs the animation at 0.01 ms (the end state is preserved without a visible jump), or a custom keyframe stack for complex cases.

Which properties slow the browser down?

Browser rendering runs in three phases per frame: layout (compute positions and sizes), paint (rasterise pixels), composite (stack layers). web.dev classifies properties by which phases they trigger:

• Composited only — transform, opacity, filter, backdrop-filter. The browser can hand these animations to a dedicated compositor layer; the main thread stays free and 60 fps on mobile is realistic.
• Paint-trigger — color, background-color, box-shadow. The browser must repaint every frame. Fine on desktop, noticeable on low-end mobile.
• Layout-trigger — width, height, top, left, margin, padding, font-size, border-width. The browser must recompute layout every frame, often cascading through sibling elements. Guaranteed to jank on mobile.

The generator scans every keyframe and surfaces an orange-bordered warning whenever a layout or paint property is active. Suggestions are concrete: width → transform: scaleX(), top → transform: translateY(), margin → transform: translate(). The rewrite usually costs only one keyframe property — and the result looks identical.

How do easing curves work?

An easing function describes acceleration over the animation duration. linear is constant — it reads mechanical and is rarely the right choice. ease-out starts fast and lands gently — the most natural choice for UI entrances. ease-in-out eases at both ends — appropriate for hover transitions.

Most standard curves (CSS ease, ease-in, ease-out, ease-in-out) are round and soft. For refined-minimalism designs the quint family is sharper and more precise — cubic-bezier(0.16, 1, 0.3, 1) is the quint-out curve that the kittokit design system itself uses. The back family has a small overshoot at the end (cubic-bezier(0.175, 0.885, 0.32, 1.275) for back-out) and is the clean alternative to rubbery bounce animations.

31 preset curves are available, grouped by family: Linear, Standard, Quint, Quart, Cubic, Quad, Expo, Circ, Back, Sine, Steps. For an exact curve, switch to the cubic-bezier editor and drag the four handle values (x1, y1, x2, y2) directly.

When does the Web Animations API pay off?

CSS @keyframes runs declaratively — the browser owns the timeline and JavaScript only gets indirect control via animation-play-state or class toggles. As soon as you need pause(), currentTime seeking, playbackRate changes, or programmatic reverse(), the Web Animations API (element.animate()) is the cleaner tool.

Three typical use cases:

• Scrollytelling. The animation progress should track scroll position. With WAAPI you set animation.currentTime = scrollProgress * animation.effect.getTiming().duration. Pure CSS cannot do this.
• Sequenced story flows. Multiple animations must run in sequence with a callback after each step. WAAPI exposes a Promise interface via animation.finished.
• Interactive control. Pause/play buttons, “reverse the animation” toggles, “jump to 50%” sliders. CSS-only forces class toggles and animationend listeners; WAAPI gives you direct methods.

The generator emits the WAAPI snippet with a built-in prefers-reduced-motion guard: if the user has motion reduction on, the animation runs for 1 ms and snaps to the end state.

How do scroll-driven animations work?

Since Chrome 115 (stable) and Edge 115, animation-timeline: scroll() is shipping — the animation runs against scroll position rather than time. Firefox is working on it (behind a feature flag); Safari has not landed it yet. This makes classic scrollytelling patterns (parallax, progress bars, pin-scrub) possible without JavaScript.

The generator includes an opt-in toggle. When active, the output wraps in @supports (animation-timeline: scroll()):

@supports (animation-timeline: scroll()) {
  .animated {
    animation-name: myAnim;
    animation-timeline: scroll();
    animation-duration: auto;
  }
}

Browsers without support fall back silently to time-based animation. For production outside Chrome-only, the scroll-driven-animations polyfill ships the missing browser APIs in ~12 kB of JavaScript.

Caveat: the generator labels the feature “Limited availability” so it is clear that Safari and Firefox users will get the time-based fallback today.

Which animation patterns belong where?

Entrance animations (Fade In, Slide In, Zoom In) are right for content that appears after a user trigger — modal sheets, toast notifications, expanding accordion items. 200–400 ms with quint-out or cubic-out is the unobtrusive default. Longer durations (>500 ms) feel artificially slow.

Attention triggers (Pulse, Shake, Wiggle, Soft-bounce) flag important elements — a validation error on a form field, a new notification badge in the header, a “required field” hint. Use infinite iteration sparingly — a constantly pulsing button gets annoying fast. Prefer 2–3 iterations on user action, then stop.

Exit animations (Fade Out, Slide Out, Zoom Out) are the often-forgotten half. If you fade a modal in but hard-snap it away with display: none, the close feels abrupt. 150–250 ms of cubic-in on exit reads symmetrically to the entrance.

Hover transitions are not an animation-builder use case — that’s what transition: transform 200ms var(--ease-out) is for. Animations are state-driven; transitions are property-driven. Keep the boundary clean.

How do I use CSS animations in Tailwind v4?

Tailwind v4 replaces the v3 JS config with a CSS-first @theme block. Animations register as --animate-{name} custom properties; Tailwind auto-generates the animate-{name} utility class:

@theme {
  --animate-fadeInUp: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both;

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(24px);
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }
}

This makes <div class="animate-fadeInUp">…</div> available as a reusable utility. The generator emits the block paste-ready, including the @media (prefers-reduced-motion) fallback scoped to the generated utility class.

Tailwind output is the most compact variant for design systems — define the animation once, reuse it everywhere. Plain CSS is the right call for isolated components or one-off animations outside a design-system context.

What do users ask most often?

What does a CSS animation builder do?

The builder creates CSS keyframe animations visually. You set stops on a timeline, choose properties per stop (transform, opacity, color), pick an easing curve, and see the result live. The output is paste-ready in three formats — plain CSS, Tailwind v4, or the Web Animations API.

How does prefers-reduced-motion work?

The CSS media query detects when a user has enabled motion reduction in their OS settings. The generator auto-emits a @media (prefers-reduced-motion: reduce) block with a configurable fallback — no animation, opacity only, instant (0.01 ms), or your own keyframes. WCAG 2.2 success criterion 2.3.3 requires this for UI animations.

Which CSS properties stay composited and keep performance smooth?

transform (translate, scale, rotate), opacity, filter, and backdrop-filter get promoted to their own compositor layers — no layout reflow, no repaint. Animating width, height, top, left, or margin forces layout reflow every frame and janks on mobile. The generator flags every layout-triggering property and suggests a transform replacement.

What is the difference between CSS animations and the Web Animations API?

CSS @keyframes runs declaratively — the browser drives the timeline and you have no direct handle. The Web Animations API (element.animate()) returns an Animation object with pause(), play(), reverse(), currentTime, and playbackRate. For scroll-driven interaction, JavaScript-orchestrated sequences, and programmatic seeking, WAAPI is the cleaner choice.

How do I use CSS animations in Tailwind v4?

Tailwind v4’s CSS-first config accepts --animate-{name} custom properties plus their @keyframes directly inside an @theme block. Tailwind auto-generates the animate-{name} utility class. The generator emits the entire block paste-ready.

What are cubic-bezier easing curves?

A cubic-bezier curve describes an animation’s acceleration through four control points. cubic-bezier(0.16, 1, 0.3, 1) is quint-out — fast start, gentle finish. Refined-minimalism design favours quint-out for UI entrances and back-out (small overshoot) as the clean alternative to rubbery bounce. The builder includes a 31-preset rail plus a drag-handle editor.

Are scroll-driven animations production-ready?

animation-timeline: scroll() has been stable in Chrome 115+; Firefox is working on it, Safari has not landed it yet. The generator wraps the scroll-driven variant in @supports (animation-timeline: scroll()) — browsers without support fall back silently to time-based animation. For production outside Chrome-only, the scroll-driven-animations polyfill is the bridge.

What do fill-mode: forwards and backwards mean?

fill-mode controls which values apply before and after an animation. forwards keeps the end frame visible — the element stays in its final state after the run. backwards applies the start frame during an animation-delay. both combines them. none (default) is usually wrong: the element snaps back to its original style after the animation.

How many keyframes should I use?

Two are enough for classic fade, slide, or zoom patterns — a start and an end. Three to five give pulse, shake, or wiggle a clear rhythm. More than ten gets unwieldy and approaches spring-physics behaviour — the Web Animations API with a JavaScript loop is the better tool there.

Does the tool save my animations?

No. Every input stays in the browser tab — nothing is stored or uploaded. Reloading clears the editor. To save an animation, copy the CSS output into your own stylesheet or your tokens.css.

Which related CSS tools are useful?

More tools for CSS authoring and design-token care:

• CSS Gradient Generator — Build gradients in OKLCH and Tailwind v4.
• Box-Shadow Generator — Visually stack multi-layer shadows.
• Flexbox Playground — Learn flex layout interactively.
• CSS Formatter — Pretty-print raw or minified CSS.