🎬

CSS Animation Generator

Build CSS keyframe animations visually. Set transforms, opacity, timing, and preview live.

Presets

Animation Settings

Name

Duration (s)

Timing

Count

Direction

Delay (s)

Keyframes

X (px)

Y (px)

Rotate (°)

Scale

Opacity

BG Color

100%

X (px)

Y (px)

Rotate (°)

Scale

Opacity

BG Color

Preview

Generated CSS

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

  }
}

.animated-element {
  animation: myAnimation 0.5s ease 0s 1 normal;
}