CSS Animation Builder

Build CSS keyframe animations visually and export the generated code.

Preview

Animation Properties

Duration

Delay

Iteration Count

Infinite

Direction

Fill Mode

Timing Function

Keyframes

Position %0%

Translate X0px

Translate Y0px

Rotate0deg

Scale1

Opacity1

CSS Output

@keyframes toolative-anim {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(100px) translateY(0px) rotate(360deg) scale(1);
    opacity: 1;
  }
}

.element {
  animation: toolative-anim 1s 0s infinite normal none ease;
}