CSS @keyframes Generator

Build CSS animations visually with multiple keyframe steps and a live preview.

Presets

Name

Duration

Timing

Iteration

Keyframe steps

CSS

@keyframes myAnimation {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  30% {
    transform: translateY(-20px);
    opacity: 1;
  }
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(-10px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.element {
  animation: myAnimation 1s ease-in-out infinite;
}