CSS Keyframe Timeline Builder

How to use CSS Keyframe Timeline Builder

Build a typed transform and opacity timeline, then download actual CSS or a fixed standalone animation demonstration. Author the meaningful stages of a small motion effect without writing raw CSS or executing code on this page. The generated source keeps percentages, units, transform order and animation settings explicit; a reduced-motion rule is always included for review in your eventual integration.

1. Provide optional typed timeline json, typed keyframe timeline as json.
2. Choose the supported mode and run the tool. Review its assumptions and any reported errors.
3. Copy the result or download a separate output; reset to clear the current form.

Good to know

• One strict UTF-8 JSON model up to 50,000 bytes, 10,000 values and 40 levels. Unknown keys and duplicate/unsafe object members are refused. All numeric JSON controls must be exact plain integer tokens; fractional, exponent and lossy near-integer spellings are not accepted. A file takes precedence over pasted text; an initial JSON BOM is not stripped.
• Root keys: name, durationMs, delayMs, iterations, direction, easing, fill, frames. A lowercase ASCII name starts with a letter, uses at most 48 letters/digits/hyphens and excludes selected CSS-wide/reserved names. Duration is 1–600,000 ms; delay is −600,000 through 600,000 ms. Iterations is an integer 1–100 or the exact string infinite.
• Use 2–50 frames with strictly increasing integer percentages, including 0 and 100. Every frame supplies at, x, y, rotate, scaleX, scaleY, opacity. Translation is integer pixels within ±2,000, rotation integer degrees within ±1,080, scale is integer percent 0–1,000, and opacity integer basis points 0–10,000.
• Direction: normal, reverse, alternate, alternate-reverse. Easing: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end. Fill: none, forwards, backwards, both. The separate easing tool supports custom curve exploration; this timeline accepts no arbitrary CSS, timing code or property names.
• The generated transform list is translate, rotate, scale, with CSS matrix composition acting right-to-left. Each selected property is explicit at every frame. Browser interpolation and motion can differ from a mathematical path or physical simulation; no independent path, collision or performance model is inferred.
• Download keyframe-timeline.css or a separate keyframe-demo.html containing one fixed box and only the generated closed CSS. Supplied HTML/SVG/CSS is never mounted or executed on this page. The demo uses a clipped fixed stage, so large translations may leave its visible bounds; it has no scripts or network resources.
• A prefers-reduced-motion rule always disables this selected effect. Real content, browser timing, transformed layout, accessibility and integration still need independent testing. Generating or downloading source is not proof that its motion is appropriate or that a complete application is accessible.
• Structured text output is limited to 500,000 characters. Reduce the supplied source when that separate output budget is exceeded.
• Inputs are processed on this device and are not automatically saved or uploaded.