🎬 CSSアニメーション（@keyframes）ジェネレーター
キーフレーム（0%・50%・100%…）ごとに transform・不透明度・背景色を設定し、animationのdurationやtiming-function、繰り返し・方向・fill-modeを調整。右のプレビュー要素で動きをライブ確認しながら、そのまま貼り付けられるCSSを生成します。処理はすべてブラウザ内で完結します。
設定
プレビュー
プレビューは設定に合わせて自動で更新されます。「再生し直す」で最初から再生します。
生成されたCSS
解説
CSSアニメーションは、@keyframes で「時間の各地点（0%〜100%）でのスタイル」を定義し、要素側の animation プロパティで「そのキーフレームをどう再生するか」を指定する、2つの部品の組み合わせで動きます。本ツールは、この2部品をGUIで同時に編集し、実際のプレビュー要素に適用して確かめながら、貼り付け可能なCSSを書き出します。手で書くと閉じ括弧やカンマの位置で崩れがちな記述を、設定から機械的に生成するのがねらいです。
各キーフレームでは transform（移動 translateX/Y・拡大 scale・回転 rotate）、不透明度 opacity、背景色 background-color を設定できます。transform は複数の関数を1行に並べて合成でき、例えば「右に動きながら少し縮小して回る」といった動きを1ステップで表せます。ステップは0%・50%・100%の3つを既定で用意し、必要に応じて任意の位置（%）で追加・削除できます。位置は自動で昇順に整列してからCSSに反映します。
要素側の animation では、継続時間（duration）、緩急を決める timing-function（ease・linear・ease-in/out や自由曲線の cubic-bezier）、開始までの遅延（delay）、繰り返し回数（数値または infinite）、往復などの向きを決める direction、再生前後のスタイル保持を決める fill-mode を指定します。これらは animation: 名前 1s ease 0s infinite normal none; のように1行のショートハンドへまとめて出力します。
なめらかに動かすコツは、レイアウトを再計算させる left/top/width などではなく、GPUで合成しやすい transform と opacity を中心に組むことです。本ツールが transform・opacity を主役に据えているのはこのためで、背景色の変化は補助的に使うのが無難です。生成結果のキーフレーム名は sg-anim 固定なので、既存CSSと衝突する場合は貼り付け後に名前を置き換えてください。
よくある質問
@keyframes と animation の関係は？
@keyframes 名前 { … } は「動きの内容（各時点のスタイル）」を定義するだけで、それ自体は何も動かしません。要素に animation: 名前 継続時間 …; を書いて初めて、そのキーフレームが再生されます。名前が両者をつなぐ鍵で、綴りが一致していないと動きません。
timing-function（ease や cubic-bezier）は何を変えますか？
キーフレーム間の「進み方（緩急）」を決めます。ease は自然に加減速、linear は一定速度、ease-in は出だしが遅く、ease-out は終わりが遅くなります。cubic-bezier(x1,y1,x2,y2) は加減速カーブを自分で描く指定で、y を1より大きく／0より小さくすると行き過ぎて戻る弾むような動きも作れます。
iteration-count・direction・fill-mode の違いは？
iteration-count は再生回数（数値、または無限に繰り返す infinite）。direction は向きで、alternate にすると再生ごとに順・逆を交互に切り替えて往復します。fill-mode は再生の前後で要素にキーフレームのスタイルを残すかどうかで、forwards は終了後に最後のフレーム、backwards は開始前に最初のフレーム、both は両方を適用します。
なぜ transform と opacity を中心に使うのですか？
transform と opacity は、多くのブラウザでレイアウトや再描画を伴わずに合成（compositing）だけで処理でき、負荷が軽く滑らかに動きやすいためです。逆に left/top/width/height/margin などをアニメーションさせると毎フレーム再レイアウトが起き、カクつきの原因になります。位置移動は translate、拡縮は scale で表すのが定石です。
どんな場面で使いますか？
ボタンやカードの登場（フェードイン・スライドイン）、読み込み中のスピナー（回転）、注目させたい要素の点滅・脈動（パルス）、通知バッジの弾み（バウンド）など、要素の状態変化を伝える演出に向きます。繰り返す装飾は infinite、1回だけの登場演出は回数を1にして fill-mode: forwards で最終状態を保持すると扱いやすいです。
生成したCSSはそのまま使えますか？名前の衝突は？
はい、@keyframes ブロックと .box { … } のルールをコピーして貼り付ければ動きます。キーフレーム名は sg-anim 固定なので、同名の定義が既にある場合は貼り付け後に名前を一意なものへ置き換え、animation側の名前も合わせて変更してください。適用先のセレクタ（.box）も実際のクラス名に直してください。
動きが目立ちすぎるとき、アクセシビリティの配慮は？
動きに敏感な利用者のために、@media (prefers-reduced-motion: reduce) { .box { animation: none; } } のような指定でアニメーションを控える配慮が推奨されます。無限に激しく動く演出は避け、必要な情報は動き以外（色・テキスト）でも伝わるようにしておくと安心です。
解説
CSSアニメーションは、@keyframes で「時間の各地点（0%〜100%）でのスタイル」を定義し、要素側の animation プロパティで「そのキーフレームをどう再生するか」を指定する、2つの部品の組み合わせで動きます。本ツールは、この2部品をGUIで同時に編集し、実際のプレビュー要素に適用して確かめながら、貼り付け可能なCSSを書き出します。手で書くと閉じ括弧やカンマの位置で崩れがちな記述を、設定から機械的に生成するのがねらいです。
各キーフレームでは transform（移動 translateX/Y・拡大 scale・回転 rotate）、不透明度 opacity、背景色 background-color を設定できます。transform は複数の関数を1行に並べて合成でき、例えば「右に動きながら少し縮小して回る」といった動きを1ステップで表せます。ステップは0%・50%・100%の3つを既定で用意し、必要に応じて任意の位置（%）で追加・削除できます。位置は自動で昇順に整列してからCSSに反映します。
要素側の animation では、継続時間（duration）、緩急を決める timing-function（ease・linear・ease-in/out や自由曲線の cubic-bezier）、開始までの遅延（delay）、繰り返し回数（数値または infinite）、往復などの向きを決める direction、再生前後のスタイル保持を決める fill-mode を指定します。これらは animation: 名前 1s ease 0s infinite normal none; のように1行のショートハンドへまとめて出力します。
なめらかに動かすコツは、レイアウトを再計算させる left/top/width などではなく、GPUで合成しやすい transform と opacity を中心に組むことです。本ツールが transform・opacity を主役に据えているのはこのためで、背景色の変化は補助的に使うのが無難です。生成結果のキーフレーム名は sg-anim 固定なので、既存CSSと衝突する場合は貼り付け後に名前を置き換えてください。処理はすべて端末内で行い、入力内容は送信されません。
よくある質問
@keyframes と animation の関係は？
@keyframes 名前 { … } は「動きの内容（各時点のスタイル）」を定義するだけで、それ自体は何も動かしません。要素に animation: 名前 継続時間 …; を書いて初めて、そのキーフレームが再生されます。名前が両者をつなぐ鍵で、綴りが一致していないと動きません。
timing-function（ease や cubic-bezier）は何を変えますか？
キーフレーム間の「進み方（緩急）」を決めます。ease は自然に加減速、linear は一定速度、ease-in は出だしが遅く、ease-out は終わりが遅くなります。cubic-bezier(x1,y1,x2,y2) は加減速カーブを自分で描く指定で、y を1より大きく／0より小さくすると行き過ぎて戻る弾むような動きも作れます。
iteration-count・direction・fill-mode の違いは？
iteration-count は再生回数（数値、または無限に繰り返す infinite）。direction は向きで、alternate にすると再生ごとに順・逆を交互に切り替えて往復します。fill-mode は再生の前後で要素にキーフレームのスタイルを残すかどうかで、forwards は終了後に最後のフレーム、backwards は開始前に最初のフレーム、both は両方を適用します。
なぜ transform と opacity を中心に使うのですか？
transform と opacity は、多くのブラウザでレイアウトや再描画を伴わずに合成（compositing）だけで処理でき、負荷が軽く滑らかに動きやすいためです。逆に left/top/width/height/margin などをアニメーションさせると毎フレーム再レイアウトが起き、カクつきの原因になります。位置移動は translate、拡縮は scale で表すのが定石です。
どんな場面で使いますか？
ボタンやカードの登場（フェードイン・スライドイン）、読み込み中のスピナー（回転）、注目させたい要素の点滅・脈動（パルス）、通知バッジの弾み（バウンド）など、要素の状態変化を伝える演出に向きます。繰り返す装飾は infinite、1回だけの登場演出は回数を1にして fill-mode: forwards で最終状態を保持すると扱いやすいです。
生成したCSSはそのまま使えますか？名前の衝突は？
はい、@keyframes ブロックと .box { … } のルールをコピーして貼り付ければ動きます。キーフレーム名は sg-anim 固定なので、同名の定義が既にある場合は貼り付け後に名前を一意なものへ置き換え、animation側の名前も合わせて変更してください。適用先のセレクタ（.box）も実際のクラス名に直してください。
動きが目立ちすぎるとき、アクセシビリティの配慮は？
動きに敏感な利用者のために、@media (prefers-reduced-motion: reduce) { .box { animation: none; } } のような指定でアニメーションを控える配慮が推奨されます。無限に激しく動く演出は避け、必要な情報は動き以外（色・テキスト）でも伝わるようにしておくと安心です。
入力した内容はサーバーに送られますか？
送られません。キーフレームの計算もプレビューもすべてブラウザ内で完結し、設定内容はどこにも送信されません。オフラインでも利用できます。