CSS keyframe animation generator

Define a from/to animation state and instantly preview and copy the generated @keyframes CSS.

Animation name

Duration (s)

From (0%)

To (100%)

@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-20px); }
}

.element {
  animation: bounce 1s ease-in-out infinite alternate;
}

Frequently asked questions

Can I add more steps?

This generator covers a simple 0%-100% animation; add extra percentage steps manually in the copied CSS for more complex sequences.

Related tools

See all 10 free css & design tools

CSS Gradient Generator

Design linear and radial gradients and copy ready-to-use CSS code.

Use CSS Gradient Generator

Box Shadow Generator

Fine-tune offset, blur and color with live preview, then copy the CSS.

Use Box Shadow Generator

Border Radius Previewer

Adjust each corner independently and copy the CSS border-radius.

Use Border Radius Previewer

SVG Pattern Generator

Create tiling dots, stripes, grid or cross-hatch background patterns.

Use SVG Pattern Generator

CSS keyframe animation generator

Define a from/to animation state and instantly preview and copy the generated @keyframes CSS.

Animation name

Duration (s)

From (0%)

To (100%)

@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-20px); }
}

.element {
  animation: bounce 1s ease-in-out infinite alternate;
}

Frequently asked questions

Can I add more steps?

This generator covers a simple 0%-100% animation; add extra percentage steps manually in the copied CSS for more complex sequences.

Related tools

See all 10 free css & design tools

CSS Gradient Generator

Design linear and radial gradients and copy ready-to-use CSS code.

Use CSS Gradient Generator

Box Shadow Generator

Fine-tune offset, blur and color with live preview, then copy the CSS.

Use Box Shadow Generator

Border Radius Previewer

Adjust each corner independently and copy the CSS border-radius.

Use Border Radius Previewer

SVG Pattern Generator

Create tiling dots, stripes, grid or cross-hatch background patterns.

Use SVG Pattern Generator