sprite sheet CSS アニメーション ジェネレーター
sprite sheet を、ライブプレビュー付きのコピー＆ペーストできる CSS steps() アニメーションに、そのままブラウザー内で変換します。
sprite sheet はプレビューの作成と CSS 生成のためにブラウザー内でローカルに読み込まれます。画像がアップロードされることはなく、デバイス上に留まります。
出力を整えますか？ CSS Formatter をお試しください。
sprite sheet CSS アニメーション について
この sprite sheet CSS アニメーションジェネレーターは、フレームのストリップやグリッドを、@keyframes と steps() タイミング関数に基づく、すぐ貼り付けられる CSS アニメーションに変換します。ライブプレビュー用に sprite sheet 画像をドロップするか、フレームの幅・高さ・枚数を入力するだけで、background-position の計算はツールが行います。単一の横一列とフルグリッドの両方に対応し、フレームを行優先で列方向、次に行方向へたどり、keyframes を background-size と組み合わせて各セルが正確に収まるようにします。速度を FPS か合計時間で設定し、アニメーションに名前を付け、無限か固定の反復回数を選び、方向を選べます。要素のサイズ指定、@keyframes ブロック、animation ショートハンドを含む完全な CSS が得られ、コピーするか .css ファイルとしてダウンロードできます。すべてはデバイス上で動作するため、アップロードしたシートはローカルで読み込まれ、ブラウザーから外に出ることはありません。
機能
- sprite sheet をドラッグ＆ドロップまたはファイルピッカーでアップロードして即座にライブプレビュー、またはサイズ指定だけで作業
- 単一行モードは、ストリップ全体で background-position をステップさせるコンパクトな from/to の2ストップ keyframe を出力
- グリッドモードは、列方向から行方向へ行優先で、フレームごとに明示的な background-position ストップを1つ出力
- グリッドモードでは background-size を追加し、各セルを正確なフレーム寸法にスケール
- タイミングを frames-per-second またはミリ秒単位の合計時間で設定
- 無限ループか固定の反復回数を選び、normal・reverse・alternate の方向を選択
- アニメーション名を有効な CSS 識別子に自動でサニタイズ
- 完全な CSS をワンクリックでコピー、または .css ファイルとしてダウンロード
sprite sheet CSS アニメーション の使い方
- sprite sheet をアップロードするか、アップロードを省いてフレーム寸法だけを入力します。
- 単一行かグリッドを選び、フレームの幅・高さ・枚数（グリッドでは列数と行数も）を設定します。
- 速度を FPS または合計時間で設定し、アニメーションに名前を付け、反復と方向を選びます。
- ライブプレビューで要素がアニメーションする様子を見て、フレーミングが正しいか確認します。
- 生成された CSS をコピーするか、.css ファイルとしてダウンロードしてプロジェクトに組み込みます。
例
入力
8 frames, 64×64 each, single row, 12 fps, infinite
出力
.sprite {
width: 64px;
height: 64px;
background-repeat: no-repeat;
animation: sprite 0.667s steps(8) infinite normal;
}
@keyframes sprite {
from { background-position: 0 0; }
to { background-position: -512px 0; }
}
単一行のシートは、全フレームを再生するのに steps(8) と2ストップの keyframe だけで済みます。
よくあるエラーとトラブルシューティング
- アニメーションがカクついたり、次のフレームの端が少し見えたりする。 — フレームの幅と高さがシートと正確に一致しているか確認してください。セルが不揃いな場合は、すべてのフレームが同じサイズになるようシートをトリミングしてください。
- 最初のフレームだけ表示され、何も動かない。 — フレーム数が2以上であることと、シートがタイル状にならないよう background-repeat が no-repeat のままであることを確認してください。
- グリッドのシートが誤ったフレームを再生する、または斜めにずれていく。 — 列数と行数がシートのレイアウトと一致しているか確認してください。ツールはフレームを左から右、次に上から下へたどるため、数が正しくなければなりません。
- アニメーションが速すぎる、または遅すぎる。 — タイミングモードを FPS と合計時間の間で切り替えてください。合計時間をフレーム数で割ると1フレームあたりの時間になります。
よくある質問
- steps() はどのように sprite sheet をアニメーションしますか。
- steps(n) はアニメーションを n 個の等しいチャンクに分割し、補間する代わりにその間をジャンプするため、background-position が1フレームから次のフレームへスナップします。steps() をフレーム数と等しくすると、各フレームが1ステップ分表示され、ぼやけた中間位置が生じません。
- 画像をアップロードする必要がありますか。
- いいえ。sprite sheet をアップロードするとライブプレビューが得られますが、フレームの幅・高さ・枚数だけからでも正しい CSS を生成できます。画像がない場合、プレビューはプレースホルダーのグリッドを表示しますが、計算と出力は正確なままです。
- 単一行モードとグリッドモードの違いは何ですか。
- 単一行モードは全フレームが1つの横一列に並んでいると仮定し、コンパクトな from/to の keyframe を出力します。グリッドモードは複数行のシートに対応し、フレームごとに background-position ストップを1つ出力して列方向から行方向へ動き、シート全体が正しくスケールするよう background-size を追加します。
- FPS と合計時間のどちらを設定すべきですか。
- 1秒あたりに再生するフレーム数がわかっているときは FPS を使ってください。ツールはフレーム数を FPS で割って時間に変換します。フレーム数に関わらずループ全体を特定のミリ秒にしたいときは合計時間を使ってください。
- アニメーションを無限に、または数回だけループさせるにはどうすればよいですか。
- 止まらないループには Infinite を選びます。これは animation-iteration-count: infinite にマッピングされます。決まった回数だけ再生するには Count を選んで数を入力し、逆再生や交互再生には direction オプションを使ってください。
- sprite sheet はどこかにアップロードされますか。
- いいえ。画像はブラウザーの FileReader でローカルに読み込まれてプレビューを作り、デバイスから外に出ることはありません。生成される CSS はすべてお使いのマシン上で計算されます。
関連ツール
すべての ArrayKit ツール