HTML を GIF に、ブラウザで 1 フレームずつ

しくみ

3 ステップ、すべてブラウザで

ツールがページの時計を制御し、1 フレームずつ進めて描画します。そのため、遅いノートパソコンでも速いマシンと同じ動画になります。

1. <style>

   h1 { animation: rise 1.2s }

   @keyframes rise { … }

   </style>

   <h1>Hello</h1>

   HTMLanimation.html
   01

   貼り付けるか、ファイルをドロップ

   CSS と JavaScript を含むページ全体、.html ファイル、または画像やフォントを含む .zip。CDN のライブラリも通常どおり読み込まれます。

2. 16:9

   9:16

   1:1

   ⏱ 4.5 s · auto
   02

   形式とサイズを選ぶ

   MP4・GIF・WebM、または PNG の静止画。16:9・9:16・1:1、720p〜4K、24・30・60 fps。アニメーションに終わりがあれば、長さは自動で設定されます。

3. 142 / 180

   →

   MP4GIF60 fps
   03

   レンダリングしてダウンロード

   各フレームをお使いのパソコンで描画・エンコードし、完了したらダウンロードできます。画面共有の確認もアップロードもありません。

軽くてきれいな GIF にするコツ

• 短くする

  2〜6 秒で十分です。GIF のサイズはフレームごとに増えていきます。

• 1 周期だけループ

  長さをアニメーションの 1 周期に合わせると、ループの継ぎ目で飛びません。

• 15 fps、480p

  初期設定はたいていのドキュメントやチャットに合います。速い動きなら 25 fps、細部を見せるなら 720p に。

• ベタ塗りの色がきれいに出ます

  GIF は 1 フレーム 256 色までなので、長いグラデーションや写真には縞が出ます。その場合は MP4 のほうが軽くて鮮明です。