How to Export CSS Animations to MP4
CSS animations — keyframes, transitions, transforms — are some of the easiest things to export to video, because they're driven by timelines the converter fully controls. No canvas, no JavaScript loop required.
Just export it
- Put your CSS animation in a standalone HTML file (or a Claude Design export).
- Drop it on claudevideo.app.
- Choose MP4, pick a resolution, and render.
That's it — @keyframes, transition, animation, and the Web Animations API are all captured natively.
Why CSS captures perfectly
The converter uses the browser's own animation timeline and advances it frame by frame. Because CSS animations are declarative — the browser knows the exact state at any timestamp — each captured frame is pixel-exact. No sampling, no drift, no dropped frames even for complex, layered keyframes.
Tips
- Set the length with
window.CLAUDE_VIDEO = { duration: 4 }so the clip matches your animation cycle. - Loop cleanly by making the duration a whole number of animation cycles.
- Infinite animations (
animation-iteration-count: infinite) are fine — the duration you set decides how much is captured. - Need a transparent export (e.g. an animated badge)? Use WebM with alpha.