CSS Animation Generator

Build CSS keyframe animations with a visual timeline editor. Create custom animations and copy the generated CSS code.

Animation Name

Duration (s)

Timing Function

Delay (s)

Iteration Count

Direction

Fill Mode

@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  100% { }
}

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

Related Tools

Pick colors, convert HEX/RGB/HSL

Create CSS gradients visually

Calculate & scale aspect ratios

Generate favicons from text/emoji