How to use it
- Build your animation with HTML and CSS @keyframes, or edit the demo that is loaded for you.
- Choose the frame size, FPS and duration.
- Click Export Video and wait for the render and record phases to finish.
- Download your video.
Frame-accurate video from CSS animations
Instead of screen-recording in real time, this converter pauses your animations and steps them to exact timestamps, so every frame lands where it should regardless of how fast your computer is.
Use it to make animated logos, social media loops, product explainers, loading animations and motion graphics that you author as plain HTML and CSS.
Tips for better animation exports
Keep the duration equal to one full loop of your animation. Leave the duration blank to detect the longest animation automatically. For smaller memory use and faster rendering, choose a lower FPS or a smaller frame size.
Frequently asked questions
Which animations does it capture?
CSS @keyframes animations and CSS transitions. JavaScript-driven animations are not captured.
How long can the video be?
Up to 30 seconds, limited by browser memory. Larger frame sizes and higher FPS reduce the maximum length, and the tool tells you when a request is too big.
Which video format do I get?
WebM by default, or MP4 when you select it and your browser supports native MP4 recording.
Is my code uploaded to a server?
No. The conversion runs entirely in your browser using the Canvas, Web Animations and MediaRecorder APIs. Your HTML, CSS and images never leave your device.