Lottie to CSS Keyframe Generator
Convert Lottie animations to pure CSS @keyframes. Extract transform, opacity, and rotation animations as ready-to-use CSS code — no JavaScript runtime required.
1. Upload your Lottie JSON file
Drag & drop your file here or click to browse
Only .json files (max. 10MB)
Preview
Upload a Lottie JSON file to get started
Size
—
Duration
—
Frames
—
FPS
—
Anim. layers
—
Pure CSS Animations from Lottie
Turn your Lottie animations into CSS @keyframes that run anywhere — no lottie-web, no JavaScript, no external dependencies.
Upload your Lottie JSON, configure the animation name and timing function, then copy or download the generated CSS. Paste it into any stylesheet and apply the class names to your HTML elements.
How to Convert
From Lottie JSON to working CSS animation in three steps.
Upload your Lottie file
Drag and drop your .json Lottie file onto the upload zone, or click to browse. All processing is 100% client-side.
Configure output settings
Set an animation name prefix, choose a timing function, and decide whether to include the container wrapper CSS.
Copy or download the CSS
Click Generate CSS, then copy the output to your clipboard or download it as a .css file.
Paste the CSS into your stylesheet and apply the generated class names to your HTML elements. No JavaScript required.
What you get
Practical CSS output built for real projects.
Ready-to-use @keyframes
Each animated Lottie layer becomes a named @keyframes block with percentage stops covering position, rotation, scale, and opacity.
Zero JS required
The output is pure CSS. Drop it into your stylesheet and apply class names to your HTML elements. No library initialization, no bundle size impact.
Copy or download
One-click clipboard copy or download as a .css file. Integrate directly into your build process, design system, or CMS.
Configurable output
Control the class name prefix, timing function, and whether to include a container wrapper. Match your project's naming conventions without editing the output by hand.
When to use CSS animations
CSS animations are the right choice when you need lightweight, dependency-free motion.
Email campaigns
Some email clients (Apple Mail, Outlook for Mac) support CSS @keyframes. Add subtle motion to headers and CTAs that degrade gracefully in unsupported clients.
Landing pages
Animate hero elements, icons, and loaders with zero JS payload. Ideal for performance-critical pages where every kilobyte of JavaScript matters.
CMS & no-code platforms
Paste CSS animations directly into Webflow, Framer, or WordPress custom CSS fields without loading third-party libraries or writing JavaScript.
Progressive enhancement
Use as a fallback when lottie-web cannot load. CSS animations run immediately at parse time — no library download or initialization needed.
Design system tokens
Document motion design tokens in your design system as named @keyframes. Reference them across components with a single animation property.
Cross-framework use
CSS animations work identically in React, Vue, Angular, Svelte, and plain HTML. No framework-specific wrapper or adapter needed.
Tips for best results
Get the most accurate and usable CSS output from your Lottie animations.
Use transform-based animations
CSS @keyframes work best for position, rotation, scale, and opacity. Avoid Lottie files that rely heavily on shape morphing, layer effects, or AE expressions.
Fewer layers = cleaner output
Each animated layer produces a separate @keyframes block. Merge or collapse layers in After Effects or Bodymovin before exporting for more compact CSS output.
Easing is an approximation
The tool uses linear interpolation between keyframe stops. If the original used heavy ease-in or ease-out curves, try switching the timing function to "ease-in-out" for a closer match.
Test across browsers
CSS animations have excellent cross-browser support, but subtle rendering differences exist between engines. Always verify in Chrome, Firefox, and Safari before shipping.
Privacy and Security
We take your privacy seriously. Unlike most online converters that upload your files to remote servers, our tool processes everything locally.
No uploads – Your files are processed entirely in your browser. They never touch our servers.
No tracking – We don't log which files you convert or what settings you use.
No accounts – Use the tool immediately. No registration, no personal data required.
Inspect it yourself – Open DevTools and watch the network tab. You'll see zero file uploads.
Frequently Asked Questions
Everything you need to know about Lottie animations and our tools.
What does this tool generate?
It reads your Lottie JSON file and extracts animated properties — position, rotation, scale, and opacity — from each layer, then outputs CSS @keyframes rules and class declarations you can paste directly into a stylesheet.
Is the CSS output an exact match to the Lottie animation?
Close, but not exact. Lottie uses bezier-curve easing between keyframes. This tool extracts the keyframe values and uses linear interpolation, which is a good approximation. You can manually adjust the animation-timing-function in the output for a closer match.
Which Lottie properties are converted?
Position (translate), rotation, scale, and opacity on every layer. Shape path morphing, layer effects, masks, expressions, and text animations are not currently supported.
Do I need JavaScript to use the generated CSS?
No. The output is pure CSS that any modern browser can run. There is no dependency on lottie-web or any other library.
Is my Lottie file uploaded to a server?
No. All processing happens entirely in your browser. Your file never leaves your device.
What does the animation name prefix do?
It is used as a prefix for all generated CSS class names and @keyframes identifiers (e.g. "myapp-container", "myapp-shape-layer"). Change it to match your project's naming convention.
What happens with parent-child layer relationships?
Parent-child layer hierarchies (where one layer inherits the transform of another) are noted in the CSS output as comments, but parent transforms are not automatically compounded. You may need to adjust positioning manually.
Can I use this output in email clients?
Some email clients support CSS animations — notably Apple Mail and Outlook for Mac. Others (Gmail web, Outlook on Windows) will ignore the animation but the element will still display at its initial state. Always test across your target clients.