SVG や CSS のアニメーションを貼り付けるだけで、GIF / APNG のループ画像に変換できるツールです。変換処理はすべてブラウザ内で完結するため、貼り付けたコードがサーバーへ送信されることはありません。
使い方は3ステップ
- 1コードを貼り付ける 左の入力欄にアニメーションのコードを貼り付けます。まずは「SVGサンプル」「CSSサンプル」で動きを試せます。
- 2サイズと長さを決める 幅・高さ・長さ（秒）・FPS を指定します。長さはアニメーション1周期ぶん（またはその整数倍）が目安です。
- 3変換して保存する 「GIFに変換」または「APNGに変換」を押し、処理が終わったら緑色の「保存」ボタンでダウンロードします。
コード入力
SVG / HTML+CSS / CSSのみプレビュー / 書き出し
Chrome / Edge 推奨長さをアニメーション1周期に合わせると、継ぎ目のないループになります。
詳細設定
コードを貼り付けて「プレビュー更新」を押してください。
きれいにループさせるコツ
「長さ（秒）」はアニメーション1周期に合わせる
例えば animation: spin 2s linear infinite なら長さは2秒（または4秒・6秒）に。ずれていると、書き出し後に一瞬カクッと戻って見えます。
端点の警告が出たら長さを見直す
「端点差が平均◯%あります」と表示された場合は、長さが1周期になっていないか、0%と100%の見た目が異なるアニメーション（alternate なしの往復など）の可能性があります。
背景を透過したいときは
transparent のまま
白背景で書き出したいときは「背景色」に #ffffff と入力します。GIFは半透明を表現できないため、ふちを滑らかにしたい場合はAPNGがおすすめです。
仕様と注意点
- CSSアニメーションは Web Animations API で時刻を固定し、その瞬間の見た目をキャンバスへ描画します。SVGはCSSアニメーションに加えて、一部のSMILアニメーションにも対応します。
- ループ方式「シームレス優先」では、終了時刻ちょうどのフレームを出力に含めず、次のループの0秒フレームへつなぎます。
- HTML / CSS は SVG の foreignObject を経由して画像化します。疑似要素・外部画像・Webフォント・filter・mix-blend-mode などはブラウザによる差や制限があります。
- 外部画像や別ドメインの素材を含む場合、ブラウザのセキュリティ制約（canvasの汚染）で書き出しに失敗することがあります。その際は読み込み方式を自動で切り替えて再試行します。
- GIFは半透明を表現できません。背景を「transparent」のままGIFに変換すると、透過部分は黒などで塗りつぶされます。透過を保ちたい場合はAPNGをご利用ください。
- プレビュー用のiframeではスクリプトを実行しません。JavaScriptで動くアニメーションは変換できません。
- GIF / APNG のエンコード用ライブラリはCDNから読み込みます。貼り付けたアニメーション本体がサーバーへ送信されることはありません。