CSS Animation Generator

Browse 12 CSS animation presets. Customize timing, duration, delay, and iterations. Copy the CSS code. Free online tool.

Presets

Customize

Duration: 1s

Delay: 0s

Timing

Iterations

Bounce

Generated CSS

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

.animated-element {
  animation: bounce 1s ease 0s infinite;
}