@keyframesはAIに書かせる時代
@keyframesの記法を毎回覚えておく必要はありません。「どんな動きをさせたいか」を言葉で説明すれば、AIが正確なコードを生成してくれます。アニメーションはCSSコーディングの中でも特にAIが得意な分野のひとつです。
プロンプト例（スクロールフェードイン）
「スクロールで要素が画面内に入ったとき、下から40px上に動きながらフェードインするCSSアニメーションを作ってください。
複数要素に適用する場合、.delay-1〜.delay-5 クラスで0.1秒ずつ遅延できるようにしてください。
prefers-reduced-motion にも対応してください。」
よく使うアニメーションの依頼パターン
- ローディングスピナー：「円形のローディングスピナー。カラーは #3498db。2種類（実線・点線）お願いします。」
- タイピング効果：「テキストが一文字ずつ表示されるタイピングアニメーション。カーソル点滅付き。」
- パルス（通知バッジ）：「通知バッジが脈打つような波紋のパルスアニメーション。」
- シェイク（エラー時）：「フォームエラー時に入力欄が横に揺れるシェイクアニメーション。」
- 数値カウントアップ：「0から指定数値まで2秒でカウントアップするJSアニメーション。」
パフォーマンスを考慮した指示の書き方
「アニメーションは transform と opacity のみを使ってください（GPU最適化）。
will-change プロパティを適切に設定してください。
prefers-reduced-motion メディアクエリで動きを止める対応も含めてください。」注意点
アニメーションの多用はパフォーマンス低下の原因になります。AIへの依頼時点で「GPU最適化」「prefers-reduced-motion対応」を指示に含めることを習慣にしましょう。
