Build a CSS animation visually
Build a CSS @keyframes animation from common presets like fade, slide, and bounce, with live preview and copyable CSS.
Fade, slide, scale, rotate, bounce, or pulse, each a ready-made @keyframes body.
Duration and easing shape how it moves; iteration count and direction control how it repeats.
Replay the preview as many times as you like, then copy the full @keyframes rule plus the animation shorthand.
Frequently asked
What's the difference between the @keyframes rule and the animation property?
@keyframes defines what the animation looks like: the states it passes through. The animation property (a shorthand for animation-name, duration, timing function, and more) applies a named @keyframes rule to a specific element.
Why does the preview need a unique animation name?
Browsers key animations by name, so if this page reused a fixed name like 'fade', it could collide with any other @keyframes rule on the same page. A generated unique name avoids that.
What does 'alternate' direction do?
It reverses the animation on every other iteration, so it plays forward, then backward, then forward again, instead of resetting to the start each time. It only has a visible effect when iteration count is more than 1 or infinite.