CSS Animation Generator

How to use the css animation generator

1. Adjust the controls and watch the preview update.
2. Read the generated CSS below the controls.
3. Copy it into your stylesheet.

About this tool

A CSS animation is two things: a @keyframes block naming the states, and an animation shorthand saying how to play it. This generates both, because copying only the shorthand is the usual reason an animation silently does nothing.

Duration is the setting people get wrong most often. Interface motion that reads as responsive sits between roughly 150ms and 400ms; beyond about 500ms it starts to feel like waiting rather than feedback.

Easing carries most of the character. Linear motion looks mechanical because nothing in the physical world starts and stops instantly — ease-out, which begins fast and settles, is the safe default for things entering the screen.

Common uses

• Adding a fade or slide to content as it appears.
• Building an attention pulse on a notification.
• Getting the keyframes right before pasting into a stylesheet.

Frequently asked questions

My animation does nothing. Why?

Almost always a missing @keyframes block, or a name mismatch between the block and the animation property. Copy both parts.

How long should an animation be?

For interface feedback, roughly 150–400ms. Longer than about half a second feels like a delay rather than a response.

What about users who prefer reduced motion?

Wrap decorative animation in @media (prefers-reduced-motion: reduce) and disable it there. Motion can cause genuine nausea for some people.