Generator Tools

CSS Animation Generator

Build CSS keyframe animations visually. Pick a preset or edit transform and opacity steps, tune duration and easing, watch a live preview, and copy the CSS.

Quick presets

Animation settings

Animation name

Duration0.80 s

Delay0.00 s

Iteration count

Easing function

Direction

Fill mode

Play state

Pause the animation without removing it from the CSS.

Live preview

Element shape

Preview background

The preview runs the same CSS the tool will copy, including delay, direction, and fill mode. Use Restart to replay the first cycle of a finite animation.

Keyframe editor

Edit any value to switch to a custom curve. Add up to 10 steps. Percentages are sorted automatically.

Step	Translate X	Translate Y	Scale	Rotate	Opacity	Remove
%	px	px	x	deg
%	px	px	x	deg

Code output

Drop the CSS into a stylesheet, the Tailwind snippet into your tailwind.config.js, and the HTML into your markup.

Full CSS

@keyframes fade-in {
  0% {
    transform: none;
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

.element {
  animation: fade-in 0.80s ease 0.00s infinite normal both;
}

Keyframes only

@keyframes fade-in {
  0% {
    transform: none;
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

Animation shorthand

animation: fade-in 0.80s ease 0.00s infinite normal both;

HTML usage

<div class="fade-in">Animated element</div>

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      keyframes: {
        "fade-in": {
        "0%": { transform: "none", opacity: "0" },
        "100%": { transform: "none", opacity: "1" },
        },
      },
      animation: {
        "fade-in": "fade-in 0.80s ease 0s infinite normal both",
      },
    },
  },
};

Tailwind v3+ expects keyframes and animation in the theme.extend section. After adding the snippet, apply the class with animate-fade-in.

How to use

Pick a preset to populate the keyframes (fade in, slide in, bounce, spin, and more). The duration adjusts to a sensible default for that motion.
Tune duration, delay, iteration count, easing, direction, fill mode, and play state. The live preview updates as you adjust each control.
Open the Keyframe editor to add, remove, or edit steps. Each row sets translate X and Y in pixels, uniform scale, rotation in degrees, and opacity from 0 to 1.
Use Restart in the preview to replay the first cycle of a finite animation. Switch between card, circle, or text shapes and a dark, light, or checker background to verify the motion in context.
Click Copy on the Full CSS block to drop the @keyframes plus the .element rule into a stylesheet, or copy the Tailwind config snippet to wire the animation into your tailwind.config.js as animate-yourName.

About this tool

CSS Animation Generator is a visual builder for CSS keyframe animations that runs entirely in your browser. Pick a preset (fade in, fade out, slide in left, slide in right, slide in up, slide in down, scale in, scale out, zoom bounce, rotate in, flip, pulse, heart beat, shake, wobble, rubber band, bounce, spin) to drop in a battle-tested starting point, then tune the duration, delay, iteration count, easing function, direction, fill mode, and play state to match the feel you want. The keyframe editor lets you add up to ten steps and edit translateX, translateY, scale, rotate, and opacity at each percentage; the percentages are sorted automatically so you can drop a 45% step anywhere in the table without rearranging the rows. Easing options cover every CSS keyword (linear, ease, ease-in, ease-out, ease-in-out) plus popular cubic-bezier curves for back-out and quadratic acceleration. The live preview runs the exact CSS the tool will copy, including delay, direction, alternate cycles, and the fill mode, so the swatch you see is the animation your site will run. Switch the preview between a card, a circle, and a styled text element, and toggle the background between dark, light, and a transparency checker grid so you can verify the animation against the surface it will actually sit on. The Restart button replays the first cycle of a finite animation without scrolling the page. The output panel emits four ready-to-paste artifacts: a full CSS block with the @keyframes definition and the .element rule, the keyframes block on its own (handy when you already have the animation shorthand wired up), the animation shorthand alone, and a sample HTML tag using the animation class. A separate Tailwind v3+ snippet wires the keyframes and the animation utility into theme.extend so you can apply the result with animate-yourName. Useful for marketing pages building hero entrances, landing-page builders adding microinteractions, design teams prototyping motion before handing off to engineering, developers translating motion specs into copyable CSS without leaving the browser, and students learning how the @keyframes syntax composes with the animation shorthand. All computation runs locally on your device, so anything you tune here stays in your tab.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Animation Generator

How to use

About this tool

You may also like

Cubic Bezier Generator

CSS Gradient Generator

CSS Box Shadow Generator

CSS Filter Generator

CSS Clamp Generator