無料WEBツール

by 大阪のホームページ制作会社digrart

CSSスプライトアニメーション ジェネレーター｜steps()コード自動生成

🔒
ブラウザ内処理

画像はサーバーに送信しません

📝
登録不要

アカウント作成なし

⚡
即時プレビュー

リアルタイムで再生確認

cloud_uploadクリックまたはドラッグ&ドロップでスプライトシートをアップロード
collectionsクリックまたはドラッグ&ドロップで複数フレーム画像をアップロード
1000ms
4 fps

ドラッグで順番入替。✓/✕でフレームの有効/無効を切替。＋ボタンでフレーム追加。

🎬 CSSアニメーション ジェネレーター📐 画像リサイズ

CSSスプライトアニメーション ジェネレーターとは

CSSスプライトアニメーションは、1枚のスプライトシート画像を使ってanimationとsteps()関数でフレームアニメーションを実現する技法です。GIFアニメーションに比べ、画質劣化がなく、再生速度や方向をCSSで自由に制御できます。

本ツールは、スプライトシートのアップロードまたは複数フレーム画像の結合から、CSS animation + steps()コードの自動生成まで、すべてブラウザ内で完結します。

主な特徴

CSSスプライトアニメーションの作り方

Step 1: 画像をアップロード

スプライトシート1枚をアップロードするか、複数のフレーム画像をドラッグ&ドロップします。

Step 2: 設定を調整

列数・行数・再生速度・方向を設定し、プレビューで確認します。

Step 3: コードをコピー

生成されたCSS + HTMLコードをコピーして、あなたのプロジェクトに貼り付けます。

CSS animation + steps() の仕組み

steps() は animation-timing-function の値の一つで、アニメーションを滑らかな補間ではなく段階的に変化させる関数です。スプライトアニメーションでは、background-position をステップごとに移動させることで、フレームアニメーションを実現します。

CSSプロパティ一覧

プロパティ説明スプライト用値の例
animation-name@keyframesの名前sprite-anim
animation-duration1サイクルの時間1s
animation-timing-function速度曲線steps(4)
animation-iteration-count繰り返し回数infinite
animation-direction再生方向normal / reverse
background-sizeシート全体のサイズ400% 100%

よくある質問

Q. steps()関数とは？
A. animation-timing-functionの値で、滑らかではなくフレーム単位で段階的に変化させる関数です。steps(4)なら4段階。
Q. スプライトシートの推奨サイズは？
A. 2048×2048px以下推奨。モバイルでは1024×1024px以下が望ましいです。
Q. データはサーバーに送信されますか？
A. いいえ。全てブラウザ内で処理されます。
Q. GIFアニメとCSSスプライトの違いは？
A. CSSスプライトは速度変更・逆再生・一時停止が可能で、画質劣化もありません。GIFはファイル1つで完結する手軽さがあります。
Q. Retinaディスプレイに対応するには？
A. 2倍サイズのスプライトシートを用意し、background-sizeでCSS上の表示サイズを指定します。

CSSスプライトアニメーションの活用シーン

⏳

ローディングアニメーション

読み込み中のスピナーやプログレスアニメーションに。軽量でカスタマイズ自在。

🎮

キャラクター動作

Webゲームやインタラクティブサイトのキャラクターアニメーションに。

🔘

UIアイコンアニメーション

ホバー時やクリック時のアイコン変化アニメーションに。

📢

バナー広告

動きのあるバナー表示に。GIF不要で高画質を維持。

CSS