How to Convert a CSS Animation to MP4

Why a CSS Animation Needs to Become a Video

A CSS animation only exists while a browser is rendering it. The moment a client asks for "the video file", a slide deck needs a clip, or a platform only accepts MP4 uploads, your carefully tuned keyframes are stuck inside a web page. Browsers have no export button for this — there is nothing in DevTools that saves an animation as a video.

The fix is frame-by-frame rendering. Fix42's HTML to Video Converter sends your markup to a headless Chrome instance on the server, steps through the animation timeline, screenshots every single frame, and lets FFmpeg encode the result as an H.264 MP4 — the codec that plays natively on essentially every phone, browser, and editing tool. Because a real Chrome renders it, gradients, transforms, and shadows come out exactly as you designed them.

Worked Example: A Bouncing Ball Loader

Here is a complete, self-contained snippet: a ball that bounces with squash-and-stretch over a soft shadow. The whole cycle takes exactly 1.5 seconds, which matters later when we pick the clip duration.

<div class="stage">
  <div class="ball"></div>
  <div class="shadow"></div>
</div>

<style>
.stage {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #1a1a2e;
}
.ball {
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #a78bfa, #6d28d9);
  animation: bounce 1.5s cubic-bezier(.5,.05,.5,.95) infinite;
}
.shadow {
  width: 110px; height: 18px; margin-top: 26px; border-radius: 50%;
  background: rgba(0,0,0,.45);
  animation: squish 1.5s cubic-bezier(.5,.05,.5,.95) infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(-140px) scale(1, 1); }
  50%      { transform: translateY(0) scale(1.15, .85); }
}
@keyframes squish {
  0%, 100% { transform: scale(.6); opacity: .3; }
  50%      { transform: scale(1.1); opacity: .6; }
}
</style>

Step by Step

1. Open the HTML to Video Converter and paste the snippet into the HTML input box.
2. Pick the 720p (16:9) preset (1280×720). The stage fills the whole frame because it uses width:100%; height:100%.
3. Set Duration to 3s — exactly two 1.5-second bounce cycles, so the video ends where it began and loops seamlessly.
4. Set FPS to 30. That captures 90 frames, plenty for smooth motion on a bouncing shape.
5. Click Convert to MP4, preview the result, and hit Download.

Choosing Duration, FPS, and Resolution

The converter accepts durations from 1 to 15 seconds and frame rates from 15 to 60 fps. The golden rule for loops: make the clip duration a whole multiple of your animation's cycle length. A 1.5s cycle fits cleanly into 3s, 4.5s, or 6s; a 2s cycle fits 2s, 4s, or 6s. If the numbers don't divide evenly, the last frame won't match the first and the loop will visibly jump.

For frame rate, 30 fps is the safe default for almost everything. Drop to 15–20 fps for slow, simple loaders to keep files small; go to 60 fps only when the motion is fast enough to show stutter, such as quick slides or spins. Resolution presets cover 1920×1080, 1280×720, 1080×1080 square, and 1080×1920 vertical, so you can target widescreen, feed, or story formats without editing your CSS.

Pitfalls That Ruin the Export

• Animation delays create blank frames. Capture starts the instant the page loads, so an animation-delay means dead air at the start of your video.
• Hover and click animations never fire. Nothing interacts with the page during capture — convert :hover effects into keyframes that run automatically.
• External stylesheets may not load in time. Keep all CSS in a <style> block inside the pasted HTML.

Frequently Asked Questions