CSS Animation Generator

100% Free

Build CSS @keyframes animations from ready-made presets, tune duration, easing, delay, iteration, direction and fill mode, and copy production-ready CSS with a live preview.

Live Preview

12 Presets

100% Client-Side

No Sign Up

Animation nameDuration (ms)

Preset

Timing function

Delay (ms)

Iterations

∞

DirectionFill mode

Live preview

CSS

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

.element {
  animation: myAnimation 1000ms ease 0ms infinite normal both;
}

Embed This Tool

Easy to Embed

Add CSS Animation Generator to your website or blog in seconds.

Responsive design
Lightweight & fast
No backend required
Always up-to-date

<iframe
  src="https://tools.town/embed/css-animation-generator/"
  width="100%"
  height="600"
  style="border:none; border-radius:12px;"
  loading="lazy"
  title="CSS Animation Generator">
</iframe>

Share This Tool

Share Instantly

Share CSS Animation Generator with anyone — no login required.

Shareable link
No login required
Works on any device
No account needed

Share via

How to Use

1 Pick a preset — fade, slide, zoom, spin, pulse, bounce, shake and more
2 Name the animation and set the duration in milliseconds
3 Choose an easing (timing function) and a start delay
4 Set iteration count, or toggle infinite, plus direction and fill mode
5 Watch the live preview replay, then copy the @keyframes and shorthand

Features

Twelve animation presets covering the most common motion patterns
Full timing control: duration, delay, easing, iteration, direction, fill mode
Spring (back) cubic-bezier easing built in
Live preview with a replay button
Copies both the @keyframes block and the animation shorthand
Runs entirely in your browser — nothing is uploaded

Why it Matters

CSS animations bring an interface to life, but hand-writing @keyframes and remembering the exact order of the animation shorthand is fiddly and error-prone. Generating both from a visual preview means you ship motion that runs at 60fps without guessing at syntax, and you can paste it straight into any stylesheet.

★★★★★

Use Cases

UI Microinteractions

Add fade-ins, slides, and pulses to buttons, cards, and modals

Loading & Attention

Spin a loader or shake an invalid field to guide the eye

Prototyping

Drop motion into a mockup without leaving your editor

Learning CSS

See how keyframes and the animation shorthand fit together

What this tool does

The CSS Animation Generator turns a handful of choices into a complete, copy-ready CSS animation. Pick a preset, set the timing, and the tool writes both the @keyframes block and the animation shorthand for you — with a live preview that replays on demand so you can see exactly what you’re shipping.

How it works

Every preset is a small set of keyframes that animate transform and opacity — the two properties browsers animate most efficiently. Your timing choices (duration, easing, delay, iteration count, direction, and fill mode) are assembled into the animation shorthand in the correct order. The pure buildAnimation function does the string building, so the output is deterministic and identical every time.

Privacy

Everything runs locally in your browser. Nothing you type is uploaded or stored.

Frequently Asked Questions

What's the difference between the @keyframes block and the animation shorthand?

The @keyframes block defines what changes over the course of the animation — the start, end, and any intermediate states. The animation shorthand (the `animation:` line) tells an element which keyframes to run and how: its duration, easing, delay, repeat count, direction, and fill mode. You need both.

What does fill mode do?

Fill mode controls what the element looks like before the animation starts and after it ends. `forwards` keeps the final keyframe's styles, `backwards` applies the first keyframe during any delay, and `both` does both. `none` snaps back to the element's normal styles once the animation finishes.

When should I use 'infinite' iterations?

Use infinite for continuous motion like spinners, pulsing badges, or background effects. For one-off entrance animations — a card fading in, a toast sliding up — use a finite count (usually 1) so the motion plays once and stops.

Will these animations hurt performance?

The presets animate transform and opacity, which browsers can composite on the GPU without triggering layout or paint. That's the cheapest kind of animation and stays smooth even on lower-end devices. Avoid animating properties like width, top, or margin where you can.

Is my data sent anywhere?

No. The whole tool runs in your browser. Nothing you type is uploaded, logged, or stored on a server.

📖

Want to understand the math?

Browse all guides →

CSS Animations Explained

css

CSS Animations Explained: @keyframes, Easing, and the Animation Shorthand

A complete guide to CSS keyframe animations — how @keyframes work, what every part of the animation shorthand does, which properties to animate for 60fps, and how to build it all visually.

23 Jun 2026

5 min read

Related Tools You Might Like

Border Radius Generator

Visually craft CSS border-radius with per-corner sliders, live preview, unit toggle (px/em/rem/%), and shorthand collapsing.

Box Shadow Generator

Visually craft CSS box-shadow — offset, blur, spread, color, opacity, inset toggle, plus Material-style elevation presets.

CSS Gradient Generator

Build linear and radial CSS gradients with up to 6 color stops, custom angle/position/shape, live preview, and ready-made presets.

CSS Transform Generator

Compose CSS transforms — translate, scale, rotate and skew — with live sliders, a real-time preview, and clean copy-ready CSS that collapses equal scales automatically.

CSS Clip-Path Generator

Visually craft CSS clip-path shapes — polygon, circle, ellipse and inset — with editable anchor points, ready-made presets, a live preview, and copy-ready CSS.

Browse more free tools — no sign-up required

More Design Tools All categories

AI Text Summarizer

AI Image Packs