Can I add more than two keyframe steps?

Yes, add as many steps as you need at any percentage.

Does it support transform and opacity only?

Those are the most common properties covered; you can extend the CSS manually after copying.

Can I control iteration count and direction?

Yes, both are configurable, including infinite looping.

Is my data uploaded to a server?

No. This tool runs entirely in your browser using standard web APIs, so your input never leaves your device and nothing is logged or stored on our servers.

Does it work offline and on mobile?

Yes. Once the page has loaded it keeps working without a network connection, and the layout is responsive so it stays usable on phones and tablets.

CSS Animation Generator

Build keyframe animations visually with a live preview.

Support

Works Offline

Privacy First

No Login

No API

Keyframes

Name

Duration (s)

Timing function

Iteration count

Direction

Fill mode

100%

Preview

CSS output

@keyframes my-animation {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(200px);
  }
}

.element {
  animation: my-animation 2s ease-in-out infinite normal none;
}

About the CSS Animation Generator

Create CSS @keyframes animations by adding keyframe steps with transform and opacity values, tuning duration, timing function, iteration count, direction, and fill mode. Preview the animation live and copy the generated CSS.

Examples

Slide in

0% -> 100% translateX

Output

@keyframes my-animation { 0% {...} 100% {...} }

Keyboard shortcuts

Copy the main outputCtrl / ⌘ + Shift + C
Download the resultCtrl / ⌘ + S
Share this toolCtrl / ⌘ + Shift + S
Reset the inputsAlt + R
Open the tool search paletteCtrl / ⌘ + K

Related tools

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Box Shadow Generator

HTML & CSS

Layer multiple box-shadows with a live preview.

Clip Path Generator

HTML & CSS

Design polygon clip-path shapes with a live preview.

CSS Filter Playground

HTML & CSS

Tune blur, brightness, contrast, and more with a live preview.

CSS Gradient Generator

HTML & CSS

Design linear, radial, and conic gradients visually.

CSS Grid Builder

HTML & CSS

Design CSS grid layouts with live preview.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-06 · Runs entirely in your browser