CSS Keyframes Generator: Timeline & Reduced Motion

Build up to eight opacity and 2D transform keyframes, seek a static timeline and explicitly play native animation with reduced-motion controls and matching CSS.

Enabling local controls…

Controlled 2D keyframes

Animation nameDuration (0.1–60 seconds)Delay (−60–60 seconds)Iterations (0.1–100 or infinite)Timing functionDirectionFill mode

2–8 frames including 0% and 100%. Percentages must be unique; output is sorted. Opacity 0–1; X −200–200 px; Y −100–100 px; rotation −360–360 deg; scale 0.1–3. Numeric controls only; no arbitrary CSS. Names start with an ASCII letter or underscore, at most 64 characters. Inputs stay in page memory.

Timeline and animation preview

The preview never plays automatically. Load a sample and build an animation, then explicitly play.

Edit frames or load a sample, then build.

How to use this tool

Load a sample or edit keyframes, build and inspect static seek. Explicitly play, pause or restart; respect reduced motion and review the exported media rule.

When not to use it

No autoplay. Static seek is one forward iteration without delay, unlike configured playback. This does not certify the accessibility or performance of the component you ship.

Read the guide →