2026年8月21日

cssアニメーションを書き出す

cssアニメーションをmp4またはymm4(動画編集ソフト)用に書き出すプログラムを作りました

概要

CSS アニメーションで定義されたモーションを、高品質な動画ファイル(MP4 / 透過 WebM)および「ゆっくりMovieMaker4(YMM4)」のプロジェクトファイル(.ymmp)へ書き出すためのレンダリングエンジン / CLI ツールです。

詳細

決定論的なコマ送りレンダリング

Chrome DevTools Protocol (CDP) の Animation ドメインを用いて仮想時間を制御。マシンスペックやリアルタイム再生速度に依存せず、指定したフレームレートで正確にキャプチャします。

高速なストリーミングエンコード

キャプチャした PNG フレームをパイプ経由(image2pipe)で直接 FFmpeg に流し込み、ディスクへの無駄な中間ファイル書き出しを行いません。

透過動画のサポート

アルファチャンネル付きの背景透過 WebM(VP9 コーデック)出力に対応しており、動画編集ソフトへの素材合成に最適です。

ゆっくりMovieMaker4 (YMM4) 連携 & キーフレーム最適化

CSS で記述した transform(移動・回転・拡縮)や opacity(不透明度)を解析・サンプリングし、既存 .ymmp ファイル内のアイテムのキーフレームとして上書き反映できます。

RDP (Ramer-Douglas-Peucker) アルゴリズムと極値検出により、冗長な中間点を最大 90% 削減。YMM4 タイムライン上で管理しやすいクリーンなキーフレームを自動生成します。

モジュラー設計 & REST/SSE API サーバー

コア機能は独立した Rust クレート(css2mp4-core)として設計。CLI に加え、Axum ベースのローカル API サーバー(serve)を標準搭載しており、Web UI や外部ツールからのリアルタイムプレビュー・進捗監視が可能です。

てな物を作りました(githubからコピペ)

技術スタック

rust,CDP,FFmpegなど