animation-motion-design

アニメーションとモーションデザイン

Motion（旧 Framer Motion、npm 週間ダウンロード数 1,800 万以上）と View Transitions API（2026 年にはクロスブラウザーに対応）を使用して、パフォーマンスとアクセシビリティに優れたアニメーションを構築するためのパターンを紹介します。レイアウトアニメーション、ジェスチャー操作、終了時のトランジション、マイクロインタラクション、モーションアクセシビリティを扱います。

クイックリファレンス

ルール	ファイル	影響度	使用する場面
レイアウトアニメーション	rules/motion-layout.md	高	共有レイアウトのトランジション、FLIP アニメーション、layoutId
ジェスチャー操作	rules/motion-gestures.md	高	ばね物理を使ったドラッグ、ホバー、タップ
終了時のアニメーション	rules/motion-exit.md	高	AnimatePresence、アンマウント時のトランジション
View Transitions API	rules/view-transitions-api.md	高	ページ遷移、ドキュメント間のトランジション
モーションアクセシビリティ	rules/motion-accessibility.md	重大	prefers-reduced-motion、認知負荷
モーションパフォーマンス	rules/motion-performance.md	高	60fps、GPU コンポジット、レイアウトの頻繁な再計算

合計：3 カテゴリーにわたる 6 つのルール

選択表 — Motion と View Transitions API

シナリオ	推奨	理由
コンポーネントのマウント／アンマウント	Motion	AnimatePresence がライフサイクルを処理します
ページ遷移のトランジション	View Transitions API	ブラウザーに組み込まれており、どのルーターでも動作します
複雑で中断可能なアニメーション	Motion	ばね物理とジェスチャーによる割り込みに対応します
ページ間のシンプルなクロスフェード	View Transitions API	JS バンドルのコストがかかりません
ドラッグ／並べ替え操作	Motion	layout アニメーションと組み合わせた drag プロパティ
ルート間の共有要素	View Transitions API	viewTransitionName CSS プロパティ
スクロールをトリガーとするアニメーション	Motion	useInView、useScroll フック
複数ステップのオーケストレーションされたシーケンス	Motion	staggerChildren、variants

クイックスタート

Motion — コンポーネントのアニメーション

import { motion, AnimatePresence } from "motion/react"

const fadeInUp = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: -10 },
  transition: { type: "spring", stiffness: 300, damping: 24 },
}

function Card({ item }: { item: Item }) {
  return (
    <motion.div {...fadeInUp} layout layoutId={item.id}>
      {item.content}
    </motion.div>
  )
}

function CardList({ items }: { items: Item[] }) {
  return (
    <AnimatePresence mode="wait">
      {items.map((item) => (
        <Card key={item.id} item={item} />
      ))}
    </AnimatePresence>
  )
}

View Transitions API — ページ遷移

// React Router v7+ with View Transitions
import { Link, useNavigate } from "react-router"

function NavLink({ to, children }: { to: string; children: React.ReactNode }) {
  return <Link to={to} viewTransition>{children}</Link>
}

// CSS for the transition
// ::view-transition-old(root) { animation: fade-out 200ms ease; }
// ::view-transition-new(root) { animation: fade-in 200ms ease; }

Motion — デフォルトでアクセシブル

import { useReducedMotion } from "motion/react"

function AnimatedComponent() {
  const shouldReduceMotion = useReducedMotion()

  return (
    <motion.div
      animate={{ x: 100 }}
      transition={shouldReduceMotion
        ? { duration: 0 }
        : { type: "spring", stiffness: 300, damping: 24 }
      }
    />
  )
}

ルールの詳細

レイアウトアニメーション（Motion）

layout プロパティを使った FLIP ベースのレイアウトアニメーションと、layoutId による共有レイアウトのトランジションです。

読み込み：rules/motion-layout.md

ジェスチャー操作（Motion）

ばね物理とジェスチャーの組み合わせによる、ドラッグ、ホバー、タップ操作です。

読み込み：rules/motion-gestures.md

終了時のアニメーション（Motion）

React ツリーからアンマウントされるコンポーネントをアニメーションさせるための AnimatePresence です。

読み込み：rules/motion-exit.md

View Transitions API

document.startViewTransition() とフレームワーク連携を使った、ブラウザー標準のページ遷移です。

読み込み：rules/view-transitions-api.md

モーションアクセシビリティ

ユーザーのモーション設定を尊重し、モーションへの過敏さに対応するパターンで認知負荷を軽減します。

読み込み：rules/motion-accessibility.md

モーションパフォーマンス

GPU コンポジット、レイアウトの頻繁な再計算の回避、アニメーションの 60fps 維持について説明します。

読み込み：rules/motion-performance.md

基本原則

1. 60fps を維持できなければ意味がありません — アニメーションさせるのは transform と opacity（コンポジット対象のプロパティ）のみにしてください。width、height、top、left はアニメーションさせないでください。
2. プリセットを一元管理する — アニメーションのバリアントは共有ファイルで定義し、コンポーネントごとにインラインで定義しないでください。
3. 終了時には AnimatePresence を使う — React は即座にアンマウントするため、終了時のアニメーションには AnimatePresence でラップしてください。
4. duration より spring を使う — ばねは自然な動きになり、中断も可能です。duration ではなく stiffness／damping を使用してください。
5. ユーザーの設定を尊重する — 必ず prefers-reduced-motion を確認し、即時に切り替わる代替手段を用意してください。

パフォーマンス予算

指標	目標	測定方法
トランジション時間	< 400ms	ユーザーの体感閾値
アニメーションプロパティ	transform、opacity のみ	DevTools > Rendering > Paint flashing
JS バンドル（Motion）	約16KB（gzip圧縮後）	使用するものだけをインポート
初回描画の遅延	0ms	アニメーションでレンダリングをブロックしないこと
フレーム落ち	全フレームの < 5%	Performance API：PerformanceObserver

アンチパターン（禁止）

• レイアウトプロパティのアニメーション — width、height、margin、padding を直接アニメーションさせないでください。代わりに transform: scale() を使用します。
• AnimatePresence の欠落 — 使用しない場合、コンポーネントは即座にアンマウントされ、終了アニメーションが通知なく失われます。
• prefers-reduced-motion の無視 — 動きに敏感なユーザーの約35%に前庭障害を引き起こすおそれがあります。
• インラインの transition オブジェクト — レンダリングのたびに新しいオブジェクトが作成され、React のメモ化が機能しなくなります。
• duration ベースのスプリング — Motion のスプリングでは duration ではなく、stiffness／damping を使用します。混在させると予期しない動作が発生します。
• 同期的な startViewTransition — document.startViewTransition() の Promise は必ず await するか、処理してください。

詳細ドキュメント

リソース	説明
references/motion-vs-view-transitions.md	比較表、ブラウザーサポート、制限事項
references/animation-presets-library.md	一般的なパターン向けのコピー＆ペースト可能なプリセットバリアント
references/micro-interactions-catalog.md	ボタンの押下、切り替え、チェックボックス、読み込み、成功／エラー

関連スキル

• ork:ui-components — shadcn/ui コンポーネントのパターンと CVA バリアント
• ork:responsive-patterns — レスポンシブレイアウトとコンテナクエリのパターン
• ork:performance — Core Web Vitals とランタイムパフォーマンスの最適化
• ork:accessibility — WCAG 準拠、ARIA パターン、スクリーンリーダーのサポート