CSS Animation Generator

Build CSS keyframe animations visually. Add keyframes, customize transforms, and copy the code.

Animation Name

Duration: 1s

Timing Function

Iteration Count

Keyframes (3)

Rotate

Scale

Opacity

50%

Rotate

Scale

Opacity

100%

Rotate

Scale

Opacity

Full CSS

@keyframes myAnimation {
  0% {
    /* no changes */
  }
  50% {
    transform: translateX(20px) translateY(-20px) rotate(180deg) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: rotate(360deg);
  }
}

.element {
  animation: myAnimation 1s ease infinite;
}

@keyframes only

@keyframes myAnimation {
  0% {
    /* no changes */
  }
  50% {
    transform: translateX(20px) translateY(-20px) rotate(180deg) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: rotate(360deg);
  }
}

Animation Property

animation: myAnimation 1s ease infinite;

About CSS Animation Generator

CSS Animation Generator lets you build keyframe animations visually — add keyframes at percentage positions, set transform values (translate, rotate, scale), opacity, and other CSS properties, then preview the animation live. The complete @keyframes CSS and animation shorthand property are generated automatically.

Writing complex CSS animations manually requires understanding of the @keyframes syntax and getting the timing right. This visual tool lets you iterate quickly and see results instantly.

Common animation presets like fade-in, bounce, slide, and pulse are included as starting points.

Features

✓Visual keyframe editor at any percentage
✓Transform properties: translate, rotate, scale, skew
✓Opacity and other CSS property support
✓Animation duration, delay, and iteration controls
✓Common animation presets
✓Copy @keyframes + animation CSS

Common Use Cases

→Creating entrance animations for page elements
→Building hover effect animations
→Designing loading animations and loaders
→Making attention-grabbing button animations