CSS Keyframe Editor

Build animations visually

Name

Duration: 1s

Timing

Iterations

50%

100%

CSS

@keyframes myAnimation {
  0% {
    transform: translateY(0);
    opacity: 1;
    background-color: #3b82f6;
  }
  50% {
    transform: translateY(-20px);
    opacity: 0.5;
    background-color: #8b5cf6;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    background-color: #3b82f6;
  }
}

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