CSS Animation Generator

Build CSS keyframe animations with presets — customize and copy the code.

Duration

Easing

Iterations

Direction

Fill

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

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