CSSアニメーションとは何ですか？
CSSアニメーションは、@keyframesルールとanimationプロパティを使って、HTML要素にアニメーション効果を適用する仕組みです。JavaScriptを使わずにスムーズなアニメーションを実現できます。
キーフレームはどのように設定しますか？
タイムラインの各キーフレーム（0%、25%、50%、75%、100%）を選択し、transform（移動・回転・拡大）、opacity、background-colorを個別に設定できます。変更はリアルタイムでプレビューに反映されます。
プリセットアニメーションはありますか？
fade-in、slide-in、bounce、pulse、shake、spin、flipの7種類のプリセットを用意しています。プリセットを選択後、キーフレームを自由にカスタマイズすることも可能です。
timing-functionとは何ですか？
timing-function（イージング関数）はアニメーションの速度変化を制御します。ease（開始・終了が緩やか）、linear（等速）、ease-in（開始が緩やか）、ease-out（終了が緩やか）、ease-in-out（両端が緩やか）から選べます。
animation-fill-modeとは何ですか？
fill-modeはアニメーション前後の要素の状態を制御します。noneは元に戻り、forwardsは最終状態を維持、backwardsは開始前に初期状態を適用、bothはforwardsとbackwardsの両方を適用します。
生成したコードはどう使いますか？
「CSSをコピー」ボタンでクリップボードにコピーし、CSSファイルに@keyframesルールとanimationプロパティを貼り付けて使用します。対象の要素に.animated-elementクラスを付与するか、animationプロパティを直接指定してください。
キーフレームの中間ステップを追加できますか？
はい、キーフレームは`0%`、`25%`、`50%`、`75%`、`100%`など任意の百分率で設定できます。多くの中間ステップを追加することで、より複雑で滑らかなアニメーションが実現できます。
timing-functionの種類と活用方法は？
`linear`は一定速度、`ease-in`は加速、`ease-out`は減速、`cubic-bezier()`はカスタム速度曲線です。例えば物理的な跳ねるアニメーションには`cubic-bezier(0.68, -0.55, 0.265, 1.55)`などが適切です。
複数のアニメーションを同じ要素に適用できますか？
はい、`animation`プロパティをカンマで区切って複数指定できます。例えば`animation: slideIn 1s, fadeIn 2s`と記述することで、複数のアニメーションを同時実行できます。
アニメーション開始を遅延させることはできますか？
はい、`animation-delay`プロパティで遅延時間を指定できます。例えば`animation-delay: 0.5s`とすると、アニメーション開始前に0.5秒待機します。複数アニメーション実行時は、それぞれ異なる遅延を設定可能です。
パフォーマンス最適化のコツは？
`transform`と`opacity`のみをアニメーション対象にすると、ブラウザが最適化してパフォーマンスが向上します。`width`や`height`のアニメーションはレイアウト再計算が発生するため避けるべきです。
アニメーションを途中で停止・リセットするには？
JavaScriptで`element.style.animationPlayState = 'paused'`として一時停止、`'running'`で再開できます。リセットする場合は、クラスの追加・削除でアニメーション定義を切り替える方法が有効です。