CSSアニメーションジェネレーター
バウンス・フェード・スライド・回転などのプリセットを選び、継続時間・遅延・繰り返し回数・方向・fill-mode・イージング（cubic-bezier）を調整すると、プレビューと@keyframes＋animationのCSSが同時に更新されます。動きを抑えたい環境向けのprefers-reduced-motionの記述も出力に含められます。影の表現には CSS box-shadowジェネレーター もご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
アニメーションの設定
イージング（animation-timing-function）
プレビュー
プレビューは設定を変更するたびに最初から再生されます。OSの「視差効果を減らす」設定にかかわらず再生されます。
注意事項
- このツールは@keyframesを使うanimationプロパティを生成します。ホバーなどの状態変化に使うtransitionの値（継続時間・イージング）としても、同じイージングとdurationの値を流用できます。
- cubic-bezierのx1・x2はCSSの仕様上0〜1に制限されます。y1・y2は範囲外の値にすると、動きが行き過ぎて戻る（オーバーシュート）表現になります。
- イージングは「キーフレームとキーフレームの間の区間ごと」に適用されます。複数のキーフレームがあるプリセットでは、アニメーション全体ではなく各区間で加速・減速します。
- transformやopacityのアニメーションはGPUで処理されやすく、滑らかに動きます。幅・高さ・位置（top/left）を動かすとレイアウトの再計算が発生し、重くなる場合があります。
- アニメーション名は英数字・ハイフン・アンダースコアのみ使用できます。数字始まりの名前や、noneなどのキーワードと同じ名前は自動で補正されます。
- 前庭障害などで動きの多い表示が負担になる人のため、prefers-reduced-motionの記述を含めることをおすすめします。
用語解説
@keyframes
アニメーションの途中経過（何%の時点でどんなスタイルにするか）を定義するCSSのルール。名前を付け、animation-nameから参照して使う。
animation-timing-function（イージング）
時間の経過に対して変化がどう進むかを決める関数。ease・linearなどのキーワードか、cubic-bezier()で曲線を指定する。
cubic-bezier
2つの制御点（x1,y1）（x2,y2）で加速・減速の曲線を表す関数。cubic-bezier(0.25, 0.1, 0.25, 1)がeaseに相当する。
animation-fill-mode
アニメーションの開始前・終了後にスタイルを適用するか決める値。forwardsで終了時の状態を保持し、backwardsで遅延中も開始時の状態にする。
prefers-reduced-motion
OSの「視差効果を減らす」「アニメーションを減らす」設定を検出するメディアクエリ。reduceのときだけアニメーションを止めるといった配慮に使う。
よくある質問
animationとtransitionはどう使い分けますか？
transitionはホバーなど「状態が変わった時」に2つの値の間を補間するもので、開始・終了の2点だけを扱います。animationは@keyframesで途中経過を複数指定でき、繰り返しや往復、自動再生ができます。ロード時の演出やループにはanimationが向いています。
fill-modeのforwardsとbackwardsの違いは何ですか？
forwardsはアニメーション終了後も最後のキーフレームの状態を保持します。backwardsは遅延（delay）の間も最初のキーフレームの状態を適用します。両方必要な場合はbothを指定します。
cubic-bezierのyを範囲外にするとどうなりますか？
y1・y2を0〜1の外にすると、動きが目標を行き過ぎてから戻るオーバーシュートになります。x1・x2はCSSの仕様上0〜1に限られます。
prefers-reduced-motionは入れたほうがよいですか？
動きの多い表示が苦手な人のために、入れることをおすすめします。このツールでは出力に@media (prefers-reduced-motion: reduce)ブロックを含め、その場合はanimation: noneにします。ループや大きな動きのアニメーションで特に有効です。
このページをシェア