Are the keyframes included?

Yes. The output has both the @keyframes block and the animation shorthand, ready to paste into your stylesheet.

Can I loop the animation?

Yes. Set iterations to infinite for a continuous loop, or a fixed number to play it a set number of times.

How do I trigger it once on load?

Set iterations to 1 and apply the class to the element; it plays once when the element renders.

CSS & Design

CSS Animation Generator

Build CSS keyframe animations with a live preview and copy the CSS.

Free foreverRuns in your browserNo sign-up

CSS

Animation

Duration1s

Timing

Iterations

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

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

About the CSS Animation Generator

CSS animations bring interfaces to life with keyframes, but writing them by hand is fiddly.

This generator offers ready-made effects - fade, slide, bounce, spin, pulse and shake - with duration, timing and iteration controls, a live preview and a replay button, then outputs the CSS with keyframes.

It runs in your browser.

Key features

Fade, slide, bounce, spin, pulse and shake
Duration, timing and iteration
Live preview with replay
Copy CSS with keyframes

How to use

1Choose an effect and settings.
2Preview it and replay if needed.
3Copy the CSS including keyframes.

Examples

Bounce

Output: animation: bounce 1s ease infinite;

The element moves up and down continuously using two keyframes.

Frequently asked questions

Are the keyframes included?: Yes. The output has both the @keyframes block and the animation shorthand, ready to paste into your stylesheet.
Can I loop the animation?: Yes. Set iterations to infinite for a continuous loop, or a fixed number to play it a set number of times.
How do I trigger it once on load?: Set iterations to 1 and apply the class to the element; it plays once when the element renders.