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.

CSS Animation Generator

Build keyframe animations visually with a live preview.

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% {...} }

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 Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Filter Playground

HTML & CSS

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

CSS Formatter

HTML & CSS

Beautify or minify CSS with safe string handling.

Frequently asked questions

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