CSS Animation Generator

Create custom CSS keyframe animations.

Animation Preset:

Preview:

Duration (seconds)1s

Timing Function

Iterations

Generated CSS:

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

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

CSS Animation Generator

CSS Tools