CSS Animation Generator

Create CSS animations with keyframes and timing controls.

Name

Duration

Timing

Delay

Iteration

Direction

Fill Mode

Keyframes

@keyframes myAnimation {
  0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); }
}

.element {
  animation: myAnimation 0.6s ease 0s infinite normal none;
}