CSS Animation Builder

Build keyframe animations visually and export the CSS.

Presets

Animation Settings

Name

Duration

Delay

Iterations

Fill Mode

Timing Function

Keyframes

%	opacity	transform

Preview

CSS Output

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

.animated {
  animation: my-animation 1s ease 0s 1 none;
}