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.

CSS Animation Generator

Pick one of six common animation patterns (fade, slide, bounce, spin, pulse, shake) and tune duration, delay, timing function, iteration count, direction, and fill mode with live sliders. The preview pane runs the animation in a real DOM element so you can verify how it actually looks before copying the @keyframes block plus the matching `.box { animation: … }` shorthand to your project.

—

Preset

Duration: 1sDelay: 0sTiming functionLoop infinitelyIteration countDirectionFill mode

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

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

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 0 0

CSS Flexbox Playground

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

Developer 0 0

CSS Grid Playground

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

Developer 0 0

CSS Filter Playground

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

Color 0 0

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

Compare how the modern CSS color-mix() function blends two colors in different interpolation spaces (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — live swatches, computed hex, full gradient strip per space, and copyable CSS for each.

Color 0 0

Open Graph & Twitter Card Generator

Fill out a form, get a ready-to-paste `<meta>` block — Open Graph for Facebook / LinkedIn / Slack and Twitter Card tags for X / Discord.

Developer 0 0