CSS Animation Builder

Build keyframe animations with per-stop controls. Preview live and copy the generated CSS.

Keyframe Stop

Opacity0

Translate X0px

Translate Y20px

Scale0.95

Rotate0deg

Animation Name

Duration1s

Delay0s

Timing Function

Direction

Fill Mode

Iterations

∞ Infinite

Presets

Preview bg:

Playing…

drag to pan

css

@keyframes myAnimation {
  0% { opacity: 0; transform: translateX(0px) translateY(20px) scale(0.95) rotate(0deg); }
  25% { opacity: 0.5; transform: translateX(0px) translateY(10px) scale(0.97) rotate(0deg); }
  50% { opacity: 1; transform: translateX(0px) translateY(0px) scale(1) rotate(0deg); }
  75% { opacity: 1; transform: translateX(0px) translateY(0px) scale(1) rotate(0deg); }
  100% { opacity: 1; transform: translateX(0px) translateY(0px) scale(1) rotate(0deg); }
}

.element {
  animation: myAnimation 1s ease 0s 1 normal forwards;
}