CSS · @keyframes · Transitions · Web Animations API
Convert CSS Animations
to MP4
Upload any HTML file with CSS animations. Keyframes, transitions, and the Web Animations API — each frame captured precisely in a headless Chromium browser.
Unlimited renders · Cancel anytime
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
Full CSS support
CSS @keyframes, transitions, and the Web Animations API all render correctly. Animation Machine uses a real Chromium browser — no quirks or approximations.
Web font rendering
Include your font files in the ZIP with correct @font-face paths. Fonts render exactly as they do in a browser — no substitution.
Background music
Search 500,000 free CC0 tracks or upload your own audio. Music is looped and trimmed to match your animation's exact duration.
Flexible output
MP4 or GIF. 1080p landscape, 720p, portrait, or square. Draft, Standard, or High quality. Batch render up to 3 files at once.
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 with unlimited renders. No per-export fees. Cancel anytime from your account settings.
Also available