CSS Animation Generator

How to use CSS Animation Generator

1. Pick a preset animation and watch the live preview.
2. Adjust duration, delay, easing, direction and iteration count until it feels right.
3. Copy the generated @keyframes block and the animation shorthand into your stylesheet.
4. Apply the class to your element — the keyframe name is included in the generated code.
5. The generated CSS needs no vendor prefixes — unprefixed animation has been supported everywhere for years.
6. A keyframe name must be unique within the document; rename it if you are generating more than one animation.
7. Durations under about 150ms read as an abrupt jump rather than a movement; 200–400ms suits most interface transitions.

Animate transform and opacity, not layout

The presets here move things with transform and opacity for a reason: those two properties are composited on the GPU without the browser recalculating layout or repainting. Animating width, height, top, left or margin forces a reflow on every frame, which is what a janky animation on a mid-range phone actually is. If you need something to move, translate it rather than changing its position; if you need it to grow, scale it rather than changing its width.

What the easing choice actually changes

Easing is the curve mapping elapsed time to progress. linear is constant speed and looks mechanical — correct for a spinner, wrong for almost everything else, because nothing in the physical world starts and stops instantly. ease-out starts fast and settles, which suits things arriving on screen. ease-in suits things leaving. ease-in-out is the safe default for anything that loops. You can substitute your own cubic-bezier in the generated code if a preset is close but not quite right.

Iteration count, direction and where the element ends up

infinite is right for a loading indicator and wrong for anything a user has to read past — perpetual movement in peripheral vision is genuinely tiring. alternate runs every second cycle backwards, which turns a one-way keyframe list into a smooth there-and-back without writing the return frames. When an animation runs a fixed number of times the element snaps back to its original styling at the end unless you add animation-fill-mode: forwards, which is the single most common surprise with CSS animation.

Respect reduced motion

Some people get motion sickness from parallax and spin effects, and every operating system has a reduce-motion setting that browsers expose. Wrap decorative animation in a media query — @media (prefers-reduced-motion: reduce) { animation: none; } — and leave functional indicators such as loading spinners alone. It is three lines, and it is the difference between a site somebody can use and one they cannot.