Dev Tools

CSS Animation Generator

Build CSS @keyframes animations visually. Add keyframe stops, set transform/opacity/color, preview live, and copy CSS.

Preview
Animation Properties
Keyframe Stops
at%
at%
at%
CSS Code
@keyframes myAnimation {
  0% {
    transform: translateX(0);
    background-color: #3b82f6;
  }
  50% {
    transform: translateX(100px);
    opacity: 0.5;
    background-color: #8b5cf6;
  }
  100% {
    transform: translateX(0);
    background-color: #3b82f6;
  }
}

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

Related tools

Wick Editor — Animation & Game CreatorImage

Create animations, interactive projects, and simple games with a free, open-source Flash-successor editor.

mebm — Browser Video EditorMedia

Animate images, video clips, and text overlays with keyframes directly in your browser and export as a video.

CSS Gradient GeneratorCSS

Build beautiful CSS gradients visually with a live preview.

Box Shadow GeneratorCSS

Create CSS box-shadow values visually with multiple shadows and live preview.

Border Radius GeneratorCSS

Visual CSS border-radius editor with per-corner control.

Flexbox PlaygroundCSS

Interactive CSS flexbox layout builder with live preview.