animate

Next.js アニメーション

概要

このスキルでは、Next.js および React アプリケーションで、滑らかで高パフォーマンスかつアクセシブルなアニメーションを実装するための包括的なガイダンスを提供します。CSS アニメーション、Framer Motion、イージングの原則、アクセシビリティに関する考慮事項を扱います。

クイックリファレンス

イージング早見表

アニメーションの種類	イージング	期間
要素の表示	ease-out	200-300ms
画面上での要素の移動	ease-in-out	200-300ms
要素の非表示	ease-in	150-200ms
ホバー効果	ease	150ms
不透明度のみ	linear	変動

CSS カスタムプロパティ（推奨）

:root {
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
}

よくあるアニメーションパターン

1. ホバー時の浮き上がり効果

.card {
  transition: transform 200ms var(--ease-out-quint),
              box-shadow 200ms var(--ease-out-quint);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

2. ボタンを押す動作

.button {
  transition: transform 100ms ease-out;
}
.button:active {
  transform: scale(0.97);
}

3. マウント時のフェードイン（Framer Motion）

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3, ease: [.23, 1, .32, 1] }}
>
  Content
</motion.div>

4. 退出アニメーション付きモーダル

<AnimatePresence>
  {isOpen && (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: 0.2, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  )}
</AnimatePresence>

5. タブインジケーター（共有レイアウト）

{tabs.map(tab => (
  <button key={tab} onClick={() => setActive(tab)} className="relative px-4 py-2">
    {tab}
    {active === tab && (
      <motion.div
        layoutId="tab-indicator"
        className="absolute inset-0 bg-blue-500 rounded -z-10"
        transition={{ type: "spring", stiffness: 400, damping: 30 }}
      />
    )}
  </button>
))}

6. リストのスタガーアニメーション

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
}

const item = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
}

<motion.ul variants={container} initial="hidden" animate="visible">
  {items.map(i => <motion.li key={i} variants={item}>{i}</motion.li>)}
</motion.ul>

基本ルール

1. 退出は表示より速く：退出アニメーションの時間は、表示アニメーションの約75%にします
2. アニメーションは transform と opacity のみに：これらは GPU で高速化されます
3. 200～300ms が最適：ほとんどのアニメーションはこの範囲に収めます
4. 必ず prefers-reduced-motion を尊重：参考資料のアクセシビリティのセクションを参照してください
5. 中断可能なアニメーションにはスプリングを使用：ユーザーが操作を中断した場合の UX が向上します

例

コースの完全に動作する例は examples/ ディレクトリにあります。

例	説明	主なテクニック
card-hover.tsx	ホバー時に説明をスライド表示	CSS トランジション、transform、opacity
toast-stacking.tsx	トースト通知のアニメーション	CSS カスタムプロパティ、data-* トリガー
text-reveal.tsx	文字ごとのスタガーアニメーション	@keyframes、animation-delay、calc()
shared-layout.tsx	要素の位置・サイズの変形	Framer Motion layoutId
animate-height.tsx	高さの滑らかな変化	useMeasure、高さのアニメーション
multi-step-flow.tsx	方向性のあるステップウィザード	AnimatePresence、カスタムバリアント
feedback-popover.tsx	ボタンからポップオーバーへの展開	ネストされた layoutId、フォーム状態
app-store-card.tsx	iOS スタイルのカード展開	複数の layoutId 要素

例を使用するには、次のように読み込みます：Read examples/<name>.tsx

参考資料

詳しいドキュメントについては、以下の参考ファイルを読んでください。

• references/easing-and-timing.md - イージング関数、タイミングのガイドライン、スプリング設定
• references/css-animations.md - Transform、トランジション、キーフレーム、clip-path
• references/framer-motion.md - Motion コンポーネント、AnimatePresence、バリアント、レイアウトアニメーション、フック
• references/performance-accessibility.md - 60fps の最適化、prefers-reduced-motion、アクセシビリティ

用途に応じた選択

シナリオ	推奨される方法
シンプルなホバー効果	CSS トランジション
表示・退出アニメーション	Framer Motion + AnimatePresence
レイアウトの変更	Framer Motion layout prop
共有要素のトランジション	Framer Motion layoutId
スクロール連動アニメーション	Framer Motion useScroll
複雑なオーケストレーションアニメーション	Framer Motion バリアント
ドラッグ操作	Framer Motion のドラッグジェスチャー
パフォーマンスが重要な場合	transform のみを使用した CSS

依存関係

Framer Motion の例を使用するには、次をインストールします。

pnpm add framer-motion react-use-measure usehooks-ts