Animation Generator

Generate CSS keyframe animations. Create bounce, fade, slide, and custom animations.

Controls

Animation Type

Duration1s

Timing Function

Iteration Count

Direction

CSS Code

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

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

Animation Generator

Controls

CSS Code

Preview