Open the page
with your CSS.
Import the HTML file, or paste HTML with the CSS in a style tag. Linked stylesheets, fonts and images in the same folder come along.
CSS ANIMATION TO VIDEO
Export CSS animations
as video.
Keyframes, transitions and transforms you wrote in CSS, rendered to MP4, MOV or WebM. Every frame is captured on a steady clock, so the video matches what you designed.
How to turn a CSS animation into a video
Open the page
Match the video
to the animation.
Set the duration to the length of your animation, or to several loops of it, and choose the frame rate.
Scrub
the timeline.
Move the playhead to check any moment. The studio drives the page on its own clock, so the preview matches the export.
Export
MP4 or MOV.
Render an MP4 for sharing, or a transparent MOV or WebM to use as an overlay in another editor.
A CSS animation that renders as-is
No JavaScript is needed. The studio plays the page on a fixed clock and captures each frame:
<style>
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0d1220; }
.title { font: 700 120px/1 system-ui; color: white; text-align: center; margin-top: 40vh;
animation: rise 1.2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: none; } }
</style>
<h1 class="title">Launch day</h1>Tips for CSS animation videos
- Start animations on load. Hover, click and scroll do not happen during a render. Use
animationwith a delay instead of:hover. - Use infinite loops for backgrounds. Set the video length to a whole number of loops so the clip loops cleanly.
- Make it transparent. Leave the page background transparent and export ProRes 4444 MOV for titles and lower thirds.
- Design at the final size. Use the video size, such as 1920 × 1080, or viewport units so the layout scales with any export size.
Export formats for CSS motion
| Format | Best for | Transparency |
|---|---|---|
| MP4 (H.264) | YouTube, social media, websites, presentations | No |
| MOV (ProRes 4444) | Premiere Pro, DaVinci Resolve, Final Cut, After Effects | Yes |
| WebM (VP9) | Web pages and lightweight overlays | Yes |
| PNG sequence | Compositing and frame-by-frame editing | Yes |
CSS animation to video questions
Do CSS transitions work, or only keyframes?
Both. Transitions that start on load, keyframe animations, transforms, filters and CSS variables animate on the studio clock.
Will my animation be the same speed in the video?
Yes. Time in the video follows the studio clock, not your PC speed, so a 2-second animation is exactly 2 seconds in the video, however heavy the page is.
Can I export a CSS loader or icon animation as a GIF?
The studio exports video and PNG frames rather than GIF. You can turn the WebM or PNG sequence into a GIF with another tool.
Can I use Tailwind or Animate.css?
Yes. Load them from a CDN or include the CSS in the page. Anything the browser renders, the studio renders.
More ways to make video from code
Try it free for 7 days.
Free download from the Microsoft Store. No payment card needed for the trial.