AI Captions · AI Voiceover · 500k CC0 Tracks · CSS · @keyframes · Transitions
CSS Animation to MP4 — with
AI Audio & Captions
Drop any HTML file with CSS @keyframes, transitions, or the Web Animations API. Rendered frame-by-frame in real Chromium — plus AI voiceover, auto-captions, 500,000 CC0 music tracks, and logo overlay. Not just a converter.
1 free render — no card needed · $5/mo or $36/yr after · Cancel anytime
See it in action — a real render
Want to test with a real input file? Open the live sample animation →
How it works
Package your animation
HTML + CSS + assets in one ZIP
→
Upload and render
Frame-by-frame in Chromium
→
Download MP4
1080p H.264, ready to share
Features
Everything you need for CSS to MP4
AI voiceover — 14 voices, local
Type a script and Kokoro TTS narrates your CSS animation in one of 14 English voices. Runs entirely on-server — never sent to ElevenLabs, OpenAI, or any third party. Auto-ducks cleanly under background music.
AI captions from Whisper
Local Whisper (small.en) transcribes spoken audio and burns time-synced captions into frames. Four caption styles — from subtle lower-thirds to bold TikTok-ready text. No API costs, no audio uploads.
Real Chromium CSS rendering
CSS @keyframes, transitions, and the Web Animations API all render correctly because Animation Machine steps a real Chromium browser frame-by-frame — no approximations, no quirks. Web fonts render exactly as expected.
500,000 CC0 music tracks
Search Freesound's CC0 catalog from inside Animation Machine — cinematic, lo-fi, ambient, upbeat, every genre. Music loops or trims to match your animation's exact duration. No attribution required.
FAQ
CSS Animation to MP4 — Common Questions
What CSS animation features are supported?
Animation Machine supports CSS @keyframes, CSS transitions, and the Web Animations API (WAAPI). If your animation runs in a modern browser, it will render correctly in Animation Machine.
How do I prepare my CSS animation for upload?
Package your HTML file with all its CSS, JavaScript, fonts, and image assets into a ZIP file. Make sure all asset paths are relative. Then upload the ZIP to Animation Machine.
Do web fonts render correctly?
Yes. If your ZIP includes the font files and your CSS has the correct @font-face rules with relative paths, fonts will render exactly as they do in the browser — no substitution or fallback.
What if my animation uses third-party CSS or JS libraries?
Include the library files in your ZIP with relative paths. Animation Machine runs your animation in a full Chromium browser, so any library that works in a browser will work here.
Can I export a CSS animation as GIF instead of MP4?
Yes. Animation Machine supports both MP4 and animated GIF export. GIF is ideal for short loops; MP4 is better for longer animations and produces smaller files at higher quality.
How long does rendering take?
Typically 1–3 minutes for a standard animation, depending on length and complexity. You can track progress in real time from the app.
How much does Animation Machine cost?
Animation Machine is $5 per month — or $36 per year (save 40%) — with unlimited renders. No per-export fees. Cancel anytime from your account settings.
Also available