AIに動きを頼むときは、見た目の名前に加えて「描画コスト・対応ブラウザ・reduced-motion」まで指定する

どんな問題を解決するか / いつ使うか

AIにアニメーションを付けさせると、動くけれど重い・カクつく・動きを減らしたい人への配慮がない、という仕上がりになりやすい。演出名（オーロラメッシュ、グリッチ文字、スクロール駆動リビール、3Dカルーセルなど）だけでなく、実装の条件も一緒に渡す。

指示に含める項目

• 演出名と、HTML・CSSのひな形（見本があれば貼る）
• 対応ブラウザ（例：Safari の最新2版まで。非対応時の代わりの表示）
• 描画コスト（transform と opacity だけを動かす、filter・box-shadow・大きな blur を常時アニメさせない、など）
• prefers-reduced-motion: reduce のときの挙動（止める・フェードだけにする）

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
}

注意点

• 作者は130種のCSSアニメーションを、各項目に上の条件をまとめた「AI」タブ付きで一覧にしている（公開場所は投稿の動画とリプ先）。ここでは指定の考え方だけをまとめた。
• スクロール駆動アニメーションは対応状況の差が大きいので、対応ブラウザの指定が特に効く。

関連

• 動きの指示は、動く見本付きの用語集（motion-prompt）から選んで渡し、カメラワークは名前と秒数・速さで書く
• スクロール連動アニメーションをCSSだけで作る（パララックス・セクションの演出）

出典

• @kawai_design post