What are CSS keyframes?

@keyframes define the steps of an animation. An element then references them with the animation property.

How do I make an animation loop?

Set animation-iteration-count to infinite — choose “infinite” in the Iterations control.

Can I copy the generated CSS?

Yes. Click Copy CSS to put the code on your clipboard, or Download CSS to save a .css file. You can also edit the code by hand before copying.

Is anything uploaded to a server?

No. The CSS is generated in your browser from the settings you choose. The tool keeps working offline once the page has loaded.

Can I share my design?

Yes. The page address updates as you change settings, so the Share button copies a link that restores your exact configuration.

CSS Animation Generator

Pick an animation, then adjust duration, delay, easing, direction and repeat count. The preview loops so you can judge the motion before copying the keyframes.

Last updated: 2026-07-21 · Runs 100% in your browser

// controls

Animation

Duration1.2s

Delay0s

Easing

Iterations

Direction

Live preview

Generated CSS

.animated {
  animation: bounce 1.2s ease-in-out 0s infinite normal both;
}

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

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; }
}

// Example output

.animated {
  animation: bounce 1.2s ease-in-out 0s infinite normal both;
}

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

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; }
}

// Features

▸6 animation types
▸Duration and delay
▸Easing, direction and iterations
▸Complete @keyframes output
▸Reduced-motion friendly

// How to use

01Adjust the controls on the left or pick a preset to start the CSS Animation Generator.
02Watch the live preview update instantly as you change each setting.
03Fine-tune the generated CSS by hand in the code panel if you like.
04Click Copy CSS or Download CSS, or Share to send a link to your design.

// FAQ

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.

Sponsored · Recommended developer deals

// Related tools

CSS Transform Generator

Rotate, scale, skew and translate elements in 2D and 3D and copy the combined CSS transform.

CSS Loader Generator

Create pure-CSS loading spinners, bouncing dots, progress bars and pulses with adjustable size and speed.

Text Shadow Generator

Create glowing, embossed or retro text effects with a live CSS text-shadow editor and copyable code.