CSS Animation Builder

Create keyframe animations with timeline editor

Settings

Animation Name

Duration

Delay

Iteration Count

Direction

Timing Function

Fill Mode

Timeline

0%25%50%75%100%

Keyframe at 0%

Keyframe at 100%

Presets

Preview

Preview with current settings

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

.animated-element {
  animation: myAnimation 2s ease infinite both;
}