CSS Animation Generator

Generate keyframe animations with a live preview.

bounce

Animation

Duration · 1.00s

Iterations

Timing function

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

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

Free CSS animation generator. Choose a fade, slide, bounce, spin or pulse preset, set the duration and timing function, preview it live, and copy the @keyframes and animation CSS. Runs in your browser.

How to use the CSS Animation Generator

01Pick an animation preset like bounce or pulse.
02Set the duration, timing function and iterations.
03Copy the @keyframes and animation CSS.

Frequently asked questions

Does it output the @keyframes too?

Yes. The generated CSS includes the full @keyframes rule for the chosen preset plus the animation shorthand, so you can paste both straight into your stylesheet.