css2lottie

Write animations in HTML + CSS, get a Lottie file. No After Effects needed.

Live demo: see every example as CSS and Lottie, side by side

css2lottie converts CSS @keyframes, transitions and inline SVG into Lottie JSON (Bodymovin 5.7+). The output plays in lottie-web, lottie-ios, lottie-android and Flutter.

npx css2lottie spinner.html -o spinner.json

• Runs locally. There's no server, no account and no upload. A headless Chromium on your machine reads the animation.
• Matches the browser's frames. Values are read from the browser's own animation engine via the Web Animations API, frame by frame. The test suite compares a CSS screenshot with a lottie-web screenshot of every example.
• Keeps real easing. When a CSS timing function (ease, ease-in-out, cubic-bezier(...)) can be reproduced exactly, you get one Lottie keyframe with matching bezier handles instead of 60 keyframes per second. It falls back to per-frame sampling only where needed.
• Tells you what it dropped. A report lists every unsupported or approximated feature, such as box-shadow, filters or gradients.

Install

npm install --save-dev css2lottie
npx css2lottie install-browser   # one-time: downloads the headless Chromium used for sampling

Requires Node.js 18.17+. If you already have Chrome/Chromium, you can skip install-browser and pass --executable-path (or set CSS2LOTTIE_CHROMIUM_PATH).

CLI

npx css2lottie input.html -o output.json --width 400 --height 400 --fps 60

Flag	Description
-o, --output <file>	Output file (default <input>.json, - for stdout). A .lottie name writes dotLottie
--width, --height	Composition size in px (default: the root element's size with --selector, else 512)
--fps <n>	Frame rate (default 60)
-d, --duration <ms|s>	Duration (default: auto-detected from the longest animation; one loop for infinite)
-s, --selector <css>	Convert only this root element (centered in the composition)
--report	Print unsupported / approximated features
--report-json <file>	Write the report as JSON
--preview	Open a local page that plays the CSS original and the Lottie side by side
-w, --watch	Re-convert on every save; with --preview the page reloads by itself
--no-optimize	Disable easing optimization (per-frame keys, simplified)
--font <family=file>	Font file used to convert text to outlines (repeatable)
--background	Include the page background color as a layer
--pretty	Pretty-print the JSON
--executable-path <path>	Chromium/Chrome binary to use

--preview starts a small local server and opens a comparison page. It has a shared scrubber, so you can step both versions to the same frame.

API

import { convert } from "css2lottie";

const lottie = await convert({ html, width: 400, height: 400, fps: 60 });

To get the report as well:

import { convertWithReport, formatReport } from "css2lottie";

const { lottie, report } = await convertWithReport({
  file: "./animations/logo.html", // or `html` (string) / `url`
  selector: "#logo", // optional: one root element
  duration: 2000, // optional: ms (auto-detected by default)
  fonts: { Inter: "./fonts/Inter-Bold.ttf" }, // optional: text → outlines
});

console.log(formatReport(report));

This is the beginning of the README. Read the rest at the original. Read the full README ↗