Skip to content
AZ Tools

CSS Animation Generator

Build a CSS animation visually — pick a preset, tweak duration/easing/iteration, see the preview, and copy the generated keyframes.

Preset

Preview

Generated CSS

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.box {
  animation: fade 1s ease 0s 1 normal none;
}

Generated CSS uses standard properties — no vendor prefixes. All modern browsers support these unprefixed.

How to use

  1. Pick a preset (fade, slide, bounce, etc.).
  2. Adjust duration, delay, easing, iteration, direction, and fill mode.
  3. Watch the preview and copy the generated CSS.

About this tool

Show

Build a CSS animation from six familiar presets — fade, slide, bounce, spin, pulse and shake — adjusting duration, delay, iteration count, timing function and fill mode against a live preview, then copy the keyframes and the shorthand together. Fill mode is the setting that catches almost everyone. By default an element reverts to its original styles the moment the animation ends, so a fade-in flickers back to invisible on the last frame; setting it to forwards keeps the final keyframe in place, which is nearly always what you meant. Iteration count accepts infinite for loading indicators, and delay is what staggers a list so its items arrive one after another rather than all at once.

Frequently asked questions

Why does my element snap back at the end?

Default animation-fill-mode is none, so styles only apply during the animation. Set fill mode to forwards to keep the final keyframe state.

What's the difference between iteration 1 and infinite?

Iteration count runs the keyframes that many times then stops. infinite loops forever — useful for spinners but burns CPU on offscreen elements.

Can I use these keyframes with prefers-reduced-motion?

Yes, wrap your .box rule in @media (prefers-reduced-motion: no-preference) { … } so motion-sensitive users opt out automatically.

Why isn't easing visible on spin?

Spin is a constant-rate rotation — easing on a single rotational variable looks roughly linear regardless. Easing is most visible on properties with start/end states, like opacity or translate.

Related tools

CSS Cubic-Bezier Curve Generator

Drag the control points to design a CSS easing curve — preview the motion live, copy the cubic-bezier() value.

Color & CSS

CSS Flexbox Playground

Visually pick flex-direction, justify-content, align-items, and gap — copy the resulting CSS or Tailwind class.

Developer

CSS Grid Playground

Visually pick grid-template-columns / rows, gap, and item alignment — copy the CSS straight into your project.

Developer

CSS Filter Playground

Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.

Color & CSS

CSS color-mix() Preview (Interpolation Space Comparison)

Compare how CSS color-mix() blends two colors across interpolation spaces (srgb, hsl, oklch, lab, lch, hwb) — live swatches and copyable CSS.

Color & CSS

HKDF Key Derivation (RFC 5869, extract-expand)

Derive keys with HKDF and see both halves: the PRK from extract, every T block from expand, and the OKM in hex and base64. RFC 5869 cases built in.

Developer