Design & CSS

CSS Animation Generator

Add keyframes on a timeline, set transforms / opacity / colors / filters per stop, tune duration / easing / direction / iterations, then preview and export. 18 presets from Fade to Cyberpunk Marquee.

Live preview

Pick a shape, scrub the timeline, and watch your animation play in real time.

Timeline3 stops

0%25%50%75%100%

Editing stop 0%

Percent

Translate X

Translate Y

Scale

Rotate

deg

Skew X

deg

Skew Y

deg

Opacity

Background color

Text color

Presets

Drop in a hand-tuned animation and tweak from there.

Animation properties

Configure how the animation plays — duration, easing, iteration, and more.

Name

Class

Duration

Delay

Iterations

Direction

Fill mode

Timing

Play state

Code output

Copy CSS, Tailwind config, React, or JSON — your call.

@keyframes myAnim {
  0% {
    transform: none;
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

.animated {
  animation: myAnim 1s ease 0s infinite normal none running;
}