CSSアニメーションジェネレーター｜@keyframes コード出力

CSSアニメーション（@keyframes）をプリセットから選び、パラメータを調整して生成できます。

1. カテゴリ（フェード・スライド等）を選び、使いたいプリセットをクリック
2. Duration（速さ）やEasing（緩急）をスライダーで微調整し、プレビューで確認
3. 「コードをコピー」ボタンで @keyframes コードをクリップボードに保存

animationショートハンドの構文

CSSの animation プロパティは、アニメーション名・再生時間・イージング・遅延・繰り返し回数・方向・填充モードをまとめて指定できるショートハンド記法です。例: animation: fadeIn 0.6s ease-in-out 0s 1 normal forwards;

@keyframes ルールの書き方

@keyframes ルールでは、アニメーションの開始状態（from または 0%）と終了状態（to または 100%）を定義します。中間キーフレーム（50% など）を追加することで、バウンスやパルスのような複雑な動きも表現できます。

animation-fill-mode の重要性

forwards を指定すると、アニメーション終了後に最終フレームのスタイルが維持されます。指定しないと、アニメーション完了後に初期状態に戻ってしまうため、フェードインなどでは forwards の指定が不可欠です。

5つの基本イージング

ease（開始と終了がゆっくり）、ease-in（開始がゆっくり）、ease-out（終了がゆっくり）、ease-in-out（両端がゆっくり）、linear（等速）の5種類が基本です。自然なUIアニメーションには ease-out または ease-in-out が推奨されます。

cubic-bezier() によるカスタムイージング

4つの数値で独自の加減速カーブを定義できます。例えば cubic-bezier(0.68, -0.55, 0.27, 1.55) はオーバーシュート（行き過ぎて戻る）を伴うバウンス感のある動きになります。

アクセシビリティへの配慮（prefers-reduced-motion）

前庭障害や動きに敏感なユーザーのために、@media (prefers-reduced-motion: reduce) メディアクエリでアニメーションを無効化するフォールバックを用意することが推奨されています。

パフォーマンスに優しいプロパティを使う

アニメーションには transform（translateやscale）と opacity の使用が推奨されます。これらはGPUアクセラレーションが効きやすく、width や height、margin をアニメーションさせるよりも遥かに滑らかです。