CSS Animation Generator

Build a CSS @keyframes animation from bounce, fade, slide, pulse or shake presets, set duration, delay, easing and fill mode, and copy the CSS.

Animation name

Duration1s

Delay0s

Timing function

Iteration count

Direction

Fill mode

Presets

CSS

@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animated-element {
  animation: myAnimation 1s ease-in-out 0s 1 normal forwards;
}

Keyframes (2)

Updated October 2, 2026. Provided as is. Check the output before you rely on it in production.

How to use CSS Animation Generator

1

Name your animation and set timing

Enter a unique animation name (e.g., 'slideIn'). Set duration (how long the animation runs) and delay (wait before starting). These appear in the CSS output.
2

Configure animation behavior

Choose timing function (ease-in-out for smooth, linear for constant speed), iteration count (1, 3, or infinite), direction (normal, reverse, alternate), and fill mode (forwards to hold final state).
3

Start with a preset or build custom keyframes

Click a preset (bounce, fade, slide, pulse, shake) to populate default keyframes instantly. Or manually define keyframes by editing percentages (0%, 50%, 100%) and CSS properties (transform, opacity, color).
4

Preview animation in real-time

Watch the gradient square animate with your settings in the live preview. Adjust sliders, timing functions, or keyframes and see changes instantly—no page reload needed.
5

Copy CSS and apply to your project

Copy the full CSS output (both @keyframes and animation property). Paste into your stylesheet, add the animation class to elements, and deploy. Works on all modern browsers.

Questions and answers

What are CSS keyframes?

CSS keyframes (@keyframes) set an element's styles at percentage points of an animation, and the browser interpolates between them. This generator starts from five presets, lets you move each keyframe's percentage and set the timing options, and outputs the @keyframes block plus a matching animation rule.

What's the difference between duration and delay?

Duration is how long the animation takes to complete (1s, 2s, etc.). Delay is how long to wait before starting the animation. For example: duration=2s, delay=1s means the animation will wait 1 second, then play for 2 seconds.

What do animation presets do?

Presets are pre-configured keyframe sets that create common animation effects: bounce (up/down motion), fade (opacity change), slide (horizontal movement), pulse (opacity fade), and shake (vibration effect). Click any preset to instantly apply its keyframes and timing.

Can I use these animations on all elements?

Yes. Once you generate the CSS, copy it and paste into your stylesheet. Apply the animation class to any HTML element. Works on divs, buttons, images, text, and any other element. The animation property is standard CSS supported by all modern browsers.

Is this tool free and does it store my data?

Yes. Free to use. All CSS generation happens in your browser. No data is sent to servers or stored. You fully own the generated CSS code. The tool is entirely client-side with zero backend dependencies.

For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/css-animation-generator/

For automation planning, fetch the canonical contract at /api/tool/css-animation-generator.json.

CSS Animation Generator