CSS Animation Generator

Pick an animation, tune it, and copy the CSS.

Free
No sign-up
Runs in your browser

Keyframes (edit freely)

Duration1.0s

Delay0.0s

Timing

Repeat

Direction

Fill mode

Respect “reduce motion” settings

bounce

CSS

@keyframes bounce {
  0%, 20%, 53%, 100% { transform: translateY(0); }
  40%, 43% { transform: translateY(-30px); }
  70% { transform: translateY(-15px); }
  90% { transform: translateY(-4px); }
}

.animate-bounce {
  animation: bounce 1s ease 0s infinite normal both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-bounce {
    animation: none;
  }
}

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us.

How to use the CSS Animation Generator

Choose a preset — or edit the keyframes directly.
Adjust duration, delay, easing, repeat count and direction.
Copy the @keyframes and class.

What does this tool do?

The output includes a prefers-reduced-motion media query so people who get motion sickness can opt out — an accessibility best practice. Animating transform and opacity, as these presets do, keeps animations smooth because browsers can run them on the GPU.

Why use it?

13 presets.
Editable keyframes.
Reduced-motion ready.

Privacy

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.

Last reviewed October 4, 2026 by the M2Toolkit team.

Other tools people use alongside the css animation generator.

How to use the CSS Animation Generator

What does this tool do?

Why use it?

Privacy

Related tools