Keyframe Generator

Build custom CSS keyframe animations with multiple steps

Percentage0%

Translate X0px

Translate Y0px

Scale1

Rotate0°

Opacity1

Color

Duration2s

Timing Function

Iteration Count

@keyframes customAnimation {
  0% {
    
    
    
  }
  100% {
    
    
    
  }
}

.element {
  animation: customAnimation 2s ease infinite;
}