CSS Animation Generator

Build CSS animations visually. Pick from common presets (fade, slide, bounce, pulse, spin, shake) or customize the keyframes. Live preview replays as you adjust. Copy the generated @keyframes + animation shorthand.

How to use the CSS Animation Generator

Pick a preset, adjust duration / easing / iteration count, click Replay to watch the animation again. The CSS output is a complete @keyframes block plus the animation shorthand ready to apply.

Building @keyframes animations

A CSS animation has two parts: a @keyframes block that describes what changes over the timeline, and an animation shorthand that says how long it runs, how it eases, and how many times it repeats. Most interface motion reuses the same handful of patterns — fade, slide, pulse, spin, shake — so starting from a preset and tuning it is far faster than writing keyframes from scratch.

Pick a preset, set duration, easing, and iterations, and replay the live preview until it feels right, then copy the complete CSS. The easing dropdown here covers the common curves; to shape a custom cubic-bezier() by dragging control points, use the easing function picker.

Common use cases

  • Entrance effects — fade or slide elements in as they appear.
  • Loading states — spin or pulse a spinner or skeleton.
  • Attention cues — shake an invalid field or bounce a notification.
  • Hover flourishes — trigger a zoom or flip on interaction.
  • Looping motion — run an infinite animation for ambient movement.

Frequently asked questions

What does the CSS output include?
A full @keyframes block plus the animation shorthand with your duration, easing, and iteration count, ready to paste.

How do iterations work?
Set a fixed number of repeats or choose infinite for a continuous loop, as with spinners and ambient effects.

Can I customise the easing curve?
The dropdown has common easings; for a bespoke curve build a cubic-bezier in the easing picker and paste it in.

Why does my animation not replay?
Re-running the same animation needs the element reset; the Replay button does that so you can watch it again.
Embed this tool on your site

Free to embed, no attribution required (but appreciated). Paste this where you want the tool to appear: