CSS Animation Generator

Keyframes and smoothness

An animation is built from keyframes on a scale from 0 to 100%: each keyframe sets a shift, rotation, scale, opacity and, if you want, a background color. The browser handles shifts, rotation, scale and opacity without repainting the page, so this kind of animation runs smoothly even on slow phones.

You can drag the cubic-bezier curve with the mouse, and the balls next to it show how it differs from ease and linear. Spring and bounce are written with linear(): a cubic-bezier curve cannot describe oscillation. For browsers without linear() support, a fallback curve goes into the code.

What the generated code already includes

The code comes with a prefers-reduced-motion block. For users who asked the system to reduce motion, the animation will finish in a millisecond and the element will land in its final state right away. That makes life easier for people with motion sickness and vestibular disorders.

The animation name is checked against CSS rules: a name starting with a digit, containing a space or a word like ease would break the code. The generator will also warn you about a delay without a first keyframe, a jump at the end, and motion that runs longer than five seconds.