CSS Animation Generator

Home/Tools/Animation Generator

Create custom CSS keyframe animations with visual timeline editor.

No sign-up neededRuns in your browserProduction-ready CSS

Animation Preset

Timing

Duration1s

Timing Function

Delay0s

Behavior

Iterations

Direction

Preview

Generated CSS

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

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

Related Tools

Transition Generator

Design smooth CSS transitions with custom easing curves.

Hover Effects Generator

Create stunning hover effects for buttons, cards, and images.

Cubic Bezier Generator

Design custom easing curves with an interactive cubic-bezier graph.