CSS Animation Generator

The two halves of a CSS animation

A CSS animation is always two pieces working together. The @keyframes block names a sequence and describes what the element looks like at each point along the way — a list of percentage steps from 0% to 100%, each holding the styles the element should show at that moment. On its own it moves nothing. The animation shorthand is the line you put on the element to play that sequence: it points at the keyframes by name and sets how long the run takes, its easing, any delay, how many times it repeats, its direction and its fill-mode. This tool builds and copies both — paste the @keyframes into your stylesheet once, then drop the animation: line onto every element that should use it.

The shorthand order, and why values disappear

The generator writes the shorthand in the order the MDN reference documents:

animation: <duration> <timing-function> <delay>
           <iteration-count> <direction> <fill-mode> <name>;

The two time values lead because the browser has no other way to tell them apart: it assigns the first <time> it reads to animation-duration and the second to animation-delay. Everything after is matched by keyword. To keep the line short and honest, any value that already equals its CSS default is left out — timing-function: ease, delay: 0s, iteration-count: 1, direction: normal and fill-mode: none all vanish when unchanged. Duration and the name are always printed. That is why a plain one-second animation collapses to just animation: 1s pop-in; — a complete, valid rule with every other property sitting at its default.

A worked example

The default here is a "pop in": the element starts small and transparent, overshoots slightly past full size, then settles. Its output is:

@keyframes pop-in {
  0% { transform: scale(.6) translateY(1.25rem); opacity: 0; }
  60% { transform: scale(1.05) translateY(0); opacity: 1; }
  100% { transform: scale(1); }
}
.card { animation: 1s pop-in; }

The 60% step pushing scale past 1 is what gives the motion its bounce — the element springs a touch too far and relaxes back at 100%. Change duration to taste and, if the element should stay put at the end, add forwards to the fill-mode so it holds the final keyframe instead of snapping back to its base styles.

What each option changes

One subtlety worth knowing: the timing-function applies to each interval between keyframes, not the whole run. With three or more steps the easing restarts at every one, so an ease-in-out across many stops can read as a series of little accelerations rather than one smooth curve. For a single, exact easing shape use a two-step (0%/100%) animation, or reach for a custom cubic-bezier() curve.

Honest limits

This is a v1 with a bounded property set: each keyframe step takes one transform, one opacity and one background value, and nothing else. That trio is deliberate — transform and opacity are the two cheapest things to animate (the browser can composite them on the GPU without re-running layout or paint), and together with background they cover the overwhelming majority of interface motion: fades, slides, pops, spins and colour pulses. CSS itself animates far more — color, box-shadow, clip-path, width, filter and dozens of others — and none of those are offered here. When you need one, copy the generated @keyframes and add the extra declaration by hand; the block is plain CSS you own. Two more real caveats: animating layout properties like width or top (which this tool avoids) can stutter on low-end devices, and a stack of long infinite animations keeps the compositor busy, so ship the fewest steps that read right. For the shapes and colours you animate, pair this with the Box-Shadow Generator, the Gradient Generator, the Transform Generator and the cubic-bezier() Generator.