アニメーション は何をしますか？
ルール
- React で Framer Motion を使用する —
motion.divにinitial、animate、exitプロパティを指定 AnimatePresenceでマウント/アンマウント時のアニメーションを実現 — 条件付きレンダリングをラップするlayoutプロパティで自動レイアウトアニメーション（並べ替え、リサイズ）- スクロールアニメーション: パララックス効果やスクロールトリガーによる表示には
useScroll()+useTransform()を使用 - 動きの低減を尊重:
useReducedMotion()フックを使用し、非必須のアニメーションを無効にする - 子要素の間隔アニメーション: リストアニメーションには
staggerChildrenを含むvariantsを使用 - パフォーマンス:
transformとopacityのみをアニメーションさせる — 決してwidth、height、marginをアニメーションさせない - 持続時間は短く: UI トランジションは 200〜400ms、ページトランジションは 400〜800ms
避けるべきこと
- レイアウトプロパティ（width、height、top、left）のアニメーション — 代わりに
transform: translate/scaleを使用する - 1秒を超える UI インタラクションのアニメーション — もっさりとした印象を与える
- ユーザーのトリガーなしで自動再生されるアニメーション — 混乱を招く
prefers-reduced-motionの無視 — アクセシビリティ上の必須要件