CSS Animation Generator

Build CSS @keyframes animations visually. Pick a preset or design your own — duration, easing, iteration. Live preview, CSS + Tailwind output.

CSS
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 400ms ease-out 0ms 1 normal both;
}
Tailwind
animate-[fadeIn_400ms_ease-out_0ms_1_normal_both]
Duration400ms
Delay0ms
Easing
Iterations
Direction

01 — Overview

How the CSS Animation Generator works

A focused CSS animation builder. Pick from a library of common presets (fade in, slide, bounce, spin, pulse, shake) or tune duration, easing, delay, direction, and iteration count from scratch. Live preview reflects every change. Copy the result as CSS @keyframes + class, or as a Tailwind arbitrary value.

02 — Use cases

When to use the CSS Animation Generator

  1. 01

    Add a subtle fade-in to a hero section without writing keyframes

  2. 02

    Get the right easing curve for a hover effect

  3. 03

    Translate an animate.css class into clean inline CSS

  4. 04

    Pick a duration that feels snappy, not sluggish (≤250ms for most UI)

03 — Examples

CSS Animation Generator examples

Preset: fade-in-up, 400ms, ease-out

ex 01

@keyframes fadeInUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: none; } }

The most-used entrance animation.

Preset: pulse, 1.6s, ease-in-out, infinite

ex 02

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

Live-indicator-style pulse, runs forever.

Preset: slide-in-left, 300ms, ease-out

ex 03

@keyframes slideInLeft { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

Composited properties only, so it stays smooth on low-end devices.

Reduced-motion-safe wrapper

ex 04

@media (prefers-reduced-motion: no-preference) { .fade-in-up { animation: fadeInUp 400ms ease-out both; } }

The animation only applies when the user hasn't asked for less motion.

04 — FAQ

Animation — frequently asked questions

How long should a UI animation last?

Most UI interactions sit between 150ms and 350ms. Anything under 100ms feels instant (and easy to miss); anything over 500ms starts to feel sluggish. Entrance and dramatic effects can go longer.

Which easing should I use?

ease-out for things that enter the screen (decelerates into place). ease-in for things that leave. ease-in-out for loops. Linear only for indeterminate progress and continuous motion.

Why no animate.css-style class name?

You can wrap the generated keyframes in any class name you like — the tool keeps the keyframe name and class name editable. For Tailwind, the arbitrary-value output bundles everything into a single class.

Which properties are cheap to animate?

transform and opacity. Both are handled by the compositor, so they don't trigger layout or paint and they run on their own thread. Animating width, height, top, or margin forces a layout pass on every frame, which is where janky animations come from. Move things with translate rather than by changing position values.

How do I respect prefers-reduced-motion?

Wrap the animation in @media (prefers-reduced-motion: no-preference), so motion is opt-in rather than opt-out. For people who've asked for reduced motion, either drop the animation entirely or replace it with a cross-fade — vestibular triggers are movement and parallax, not opacity changes.

Why doesn't my animation run when the element appears?

A CSS animation starts when the element is added to the document with the animation applied. If you toggle a class on an element that was already there, it runs immediately; if the element is inserted by a framework, it runs on mount. The usual culprit is a display: none parent — animations don't run on elements that aren't rendered.

05 — Reference

Specs and further reading

The primary sources this tool follows. Where behaviour is defined by a specification, we link the specification rather than a summary of it.

07 — More

Tools that pair with Animation

CSS Box Shadow Generator

Build CSS shadows with sliders for offset, blur, spread, color, and opacity. Live preview, multi-shadow stacking, copy as CSS or Tailwind.

Color/box-shadow

CSS Gradient Generator

Build linear and radial gradients visually. Pick stops, angle, and direction; copy as CSS or Tailwind arbitrary value.

Color/gradient

Glassmorphism Generator

Visual builder for frosted-glass cards. Sliders for blur, opacity, saturation, border — copy CSS or Tailwind.

Color/glassmorphism

Last updated .