What animation presets are available?

We include Bounce, Fade In, Slide In Left, Pulse, Shake, Spin, and Flip presets. You can customize the keyframes for any of them.

Can I use custom keyframes?

Yes, edit the keyframes textarea to write any CSS keyframe animation you need.

CSS Animation Generator

Create CSS keyframe animations visually

NameDuration: 1sTimingDelay: 0sIterations

Keyframes

Generated CSS

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

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

🎭CSS Animation Generator

CSS Animation Generator