Contact

Tools  /  CSS  /  CSS Animation Generator

CSS

CSS Animation Generator

Pick from 20+ motions (fade, slide, scale, spin, bounce, shake, wobble, flip, rubber-band, jello, heartbeat and more), tune intensity/duration/delay/iterations/direction/fill-mode/easing (incl. custom cubic-bezier), and export as CSS, Tailwind config, SCSS or React.

More CSS tools

CSS Glow Generator CSS Button Generator CSS Card Generator CSS Tooltip Generator CSS Toggle / Switch Generator CSS Spinner / Loader Generator

What this tool does

Generates a complete CSS @keyframes animation and its animation shorthand from a picked motion and a full set of timing controls, with a live preview instead of writing keyframes by hand and guessing the timing.

24 built-in motions

Covers the common animation categories: fades, slides and zooms in all four directions, scale in/out, spin and reverse spin, rotate-in, bounce, pulse, shake, wobble, flip on both axes, and a set of attention-seeking effects — rubber-band, swing, tada, jello, heartbeat, and flash. Each motion has its own keyframe shape rather than being a generic transform applied to every preset.

Full timing control

An intensity slider scales the motion's magnitude (how far it slides, how much it scales, how sharp a shake) independently of duration, delay, iteration count (including infinite), direction (normal/reverse/alternate/alternate-reverse), and fill-mode. For easing, five standard curves are built in, plus a custom cubic-bezier() field for exact control beyond the presets.

Preview and export

The preview plays against a box, a circle, or text, with a replay button to re-trigger it and a randomize button to explore different motion/timing combinations. The finished animation exports as plain CSS, a Tailwind config block ready to drop into tailwind.config.js, SCSS, or a React component with the keyframes embedded as a template string.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?
No. The animation is built and previewed entirely in the browser -- nothing is sent to a server.
What does the intensity slider actually control?
How far or sharp the motion is -- how many pixels a slide travels, how much a scale animation shrinks or grows, how wide a shake swings -- independently of the duration and delay, which control timing rather than magnitude.
Can I use a custom easing curve instead of the standard ones?
Yes -- selecting Custom reveals a cubic-bezier() field where any four control-point values can be entered directly.
What are the attention-seeking motions for?
Rubber-band, swing, tada, jello, heartbeat and flash are built to draw the eye to an already-visible element -- a notification badge or a button that needs a nudge -- rather than to introduce something onto the page like a fade or slide does.
What export formats are available?
Plain CSS with the @keyframes and animation shorthand, a Tailwind config block for tailwind.config.js, SCSS, or a React component with the keyframes embedded as a template string.
Can I preview the animation on something other than a box?
Yes -- the preview shape can be switched to a circle or to text, useful for checking how a rotation, flip, or scale actually reads on the shape it will be used on.
Theme Accent