【CSS】transition・animationが効かない原因と解決方法｜全パターン完全解説

この記事で学べること

• transition と animation の基本的な仕組みと違い
• transition が効かない4大原因（アニメーション不可プロパティ・初期値未指定・同一フレーム問題・display: none）
• animation が効かない3大原因（@keyframes定義ミス・プロパティ設定ミス・prefers-reduced-motion）
• CSS詳細度・上書き問題の診断と解決
• ブラウザ互換性とベンダープレフィックスの対応
• 実装パターン集（フェードイン・スライドイン・アコーディオン・ローディングスピナー等）
• Chrome DevTools を使ったアニメーションのデバッグ方法
• パフォーマンスのベストプラクティス（GPU対応プロパティ）

/* 個別指定 */
transition-property: opacity;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;

/* ショートハンド */
transition: opacity 0.3s ease 0s;

/* 複数プロパティ */
transition: opacity 0.3s ease,
              transform 0.3s ease;

/* すべてのプロパティ */
transition: all 0.3s ease;

.button {
  background-color: #3b82f6;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2563eb;
}

/* @keyframes でアニメーションを定義 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 要素にアニメーションを適用 */
.element {
  animation: fadeIn 0.5s ease forwards;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

ポイント：シンプルな状態変化（ホバー、表示/非表示）にはtransition、複雑な動きや自動再生にはanimationを使うのが基本です。

注意：background-imageは基本的に transition できませんが、background-positionやbackground-sizeは transition 可能です。グラデーションの色を変えたい場合は、background-colorや擬似要素のopacityを使う手法があります。

/* これは動かない */
.modal {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.active {
  display: block;
  opacity: 1;
}

/* visibility + opacity パターン */
.modal {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease,
              visibility 0.3s ease;
}

.modal.active {
  visibility: visible;
  opacity: 1;
}

/* これは動かない */
.accordion-body {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.accordion-body.open {
  height: auto; /* auto は transition できない */
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-body.open {
  max-height: 500px; /* コンテンツより大きい値を指定 */
}

注意：max-heightを使う方法は手軽ですが、実際のコンテンツ高さとmax-heightの値に差がある場合、アニメーションの速度が不自然になります。精密な制御が必要な場合はJavaScriptでscrollHeightを取得して設定しましょう。

const toggle = (element) => {
  if (element.classList.contains('open')) {
    // 閉じる
    element.style.height = element.scrollHeight + 'px';
    requestAnimationFrame(() => {
      element.style.height = '0px';
    });
    element.classList.remove('open');
  } else {
    // 開く
    element.style.height = element.scrollHeight + 'px';
    element.classList.add('open');
    element.addEventListener('transitionend', () => {
      element.style.height = 'auto';
    }, { once: true });
  }
};

.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.accordion-body.open {
  grid-template-rows: 1fr;
}

.accordion-body > div {
  overflow: hidden;
}

ポイント：CSS Grid のgrid-template-rows: 0fr → 1frを使う方法は、JavaScriptなしでheight: auto相当のアニメーションを実現できるモダンな手法です。Chrome 111+、Firefox 118+、Safari 17+ で対応しています。

.overlay {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease,
              visibility 0.3s ease;
}

.overlay.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* width の初期値が auto（暗黙的）なので transition できない */
.box {
  /* width は指定なし → auto */
  transition: width 0.3s ease;
}

.box:hover {
  width: 300px;
}

.box {
  width: 200px; /* 初期値を明示 */
  transition: width 0.3s ease;
}

.box:hover {
  width: 300px;
}

/* NG: transform の初期値が none の場合、関数が異なると補間が不自然になる可能性 */
.card {
  /* transform: none（デフォルト） */
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05) rotate(2deg);
}

/* OK: 初期値を明示的に指定 */
.card {
  transform: scale(1) rotate(0deg);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05) rotate(2deg);
}

ポイント：transformのショートハンドで複数の関数を使う場合、hover前後で同じ関数を同じ順序で指定しましょう。noneからscale(1.05) rotate(2deg)への transition は正常に動作しますが、関数の数や順序が異なると予期しない補間が起きることがあります。

// これは動かない
const el = document.createElement('div');
el.className = 'notification';
document.body.appendChild(el);

// 同一フレーム内なので transition が効かない
el.classList.add('show');

const el = document.createElement('div');
el.className = 'notification';
document.body.appendChild(el);

// 次のフレームまで待ってからクラスを追加
requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    el.classList.add('show');
  });
});

注意：requestAnimationFrameを1回だけ呼ぶと、ブラウザによっては同一フレーム内で実行される場合があります。確実にフレームを分けるには、二重のrequestAnimationFrame（ダブルRAF）を使うのが安全です。

const el = document.createElement('div');
el.className = 'notification';
document.body.appendChild(el);

// reflow を強制トリガー
el.offsetHeight; // このプロパティを読むと reflow が発生する

// reflow 後なので transition が効く
el.classList.add('show');

const el = document.createElement('div');
el.className = 'notification';
document.body.appendChild(el);

// getComputedStyle でスタイル計算を強制
getComputedStyle(el).opacity;

// これで transition が正しく動作する
el.classList.add('show');

ポイント：3つの方法（ダブルRAF、offsetHeight、getComputedStyle）のうち、reflow強制（offsetHeight）が最もシンプルで確実です。ただし、パフォーマンスが重要な場面では、不必要なreflowを避けるためにrequestAnimationFrameを使いましょう。

display: none で transition が無視されるメカニズム

• Step 1: 要素に display: none が適用されている → レンダリングツリーに存在しない
• Step 2: display: block に変更 → 要素がレンダリングツリーに追加される
• Step 3: 同時に opacity: 1 などの最終値も適用される
• Step 4: ブラウザは「変化前の状態」を知らないため、transition を計算できない
• 結果: アニメーションなしで最終状態がいきなり表示される

.dialog {
  display: none;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease,
              transform 0.3s ease,
              display 0.3s ease allow-discrete;
}

.dialog.open {
  display: block;
  opacity: 1;
  transform: scale(1);
}

/* display: none から表示されるときの開始スタイル */
@starting-style {
  .dialog.open {
    opacity: 0;
    transform: scale(0.9);
  }
}

注意：@starting-styleとtransition: display allow-discreteは2024年に主要ブラウザでサポートされた比較的新しい機能です。Chrome 117+、Edge 117+、Safari 17.4+、Firefox 129+ で対応しています。古いブラウザもサポートする場合は、次のvisibility + opacityパターンを使いましょう。

/* --- モーダルのオーバーレイ --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;

  /* 非表示状態 */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.3s ease,
              visibility 0.3s ease;
}

/* --- 表示状態 --- */
.modal-overlay.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* --- モーダル本体 --- */
.modal-content {
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

<!-- HTML -->
<div class="accordion">
  <button class="accordion-header">
    アコーディオンのタイトル
  </button>
  <div class="accordion-body">
    <div class="accordion-content">
      <p>アコーディオンの中身...</p>
    </div>
  </div>
</div>

/* CSS */
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.accordion.open .accordion-body {
  max-height: 500px; /* 十分大きな値 */
}

// より精密な高さ制御
document.querySelectorAll('[data-accordion]').forEach(accordion => {
  const header = accordion.querySelector('[data-accordion-header]');
  const body = accordion.querySelector('[data-accordion-body]');
  const content = body.querySelector('[data-accordion-content]');

  header.addEventListener('click', () => {
    const isOpen = accordion.classList.contains('open');

    if (isOpen) {
      // 閉じる：現在の高さを設定してから 0 にする
      body.style.maxHeight = body.scrollHeight + 'px';
      requestAnimationFrame(() => {
        body.style.maxHeight = '0';
      });
      accordion.classList.remove('open');
    } else {
      // 開く：コンテンツの高さを設定
      body.style.maxHeight = content.scrollHeight + 'px';
      accordion.classList.add('open');

      // transition 完了後に max-height を解除（リサイズ対応）
      body.addEventListener('transitionend', () => {
        body.style.maxHeight = 'none';
      }, { once: true });
    }
  });
});

ポイント：JavaScript版では、閉じるときに一度scrollHeightの値を設定してからrequestAnimationFrameで0にすることで、none→0（transitionなし）ではなく具体値→0（transitionあり）の変化を作り出しています。

/* @keyframes の名前は fadeIn（大文字I） */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.element {
  /* fadein（小文字i）→ 名前が違うので動かない */
  animation: fadein 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.element {
  animation: fadeIn 0.5s ease; /* 大文字小文字を一致させる */
}

/* from/to パターン（2点間の遷移） */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* パーセント パターン（複数の中間状態） */
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* NG: % の付け忘れ（無視される） */
@keyframes broken {
  0    { opacity: 0; } /* NG: % がない */
  100  { opacity: 1; } /* NG: % がない */
}

/* styles.module.css */

/* CSS Modules では @keyframes もスコープ化される */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.element {
  /* CSS Modules では自動的にスコープ化された名前に変換される */
  animation-name: fadeIn;
  animation-duration: 0.5s;
}

/* グローバルに定義したい場合 */
:global {
  @keyframes globalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* NG: animation-name がない */
.element {
  animation: 0.5s ease; /* 名前がない！ */
}

/* OK: animation-name を正しく指定 */
.element {
  animation: fadeIn 0.5s ease;
}

/* NG: animation-duration が 0s（デフォルト）のまま */
.element {
  animation-name: fadeIn;
  /* animation-duration: 0s; ← これがデフォルト */
}

/* OK: animation-duration を明示的に指定 */
.element {
  animation-name: fadeIn;
  animation-duration: 0.5s;
}

/* NG: アニメーション後に元に戻ってしまう */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease;
  /* fill-mode: none → アニメーション後 opacity: 0 に戻る */
}

/* OK: forwards で最終状態を保持 */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

/* 意図せず paused になっているケース */
.parent {
  animation-play-state: paused; /* 親に設定されている */
}

.parent .child {
  animation: spin 1s linear infinite;
  /* 親の paused を継承して動かない可能性 */
}

/* 確実に再生する */
.parent .child {
  animation: spin 1s linear infinite;
  animation-play-state: running;
}

/* ショートハンドの構文 */
animation: [name] [duration] [timing-function] [delay]
            [iteration-count] [direction] [fill-mode] [play-state];

/* NG: 0.5s が delay、1s が duration だと思っていたが逆 */
animation: fadeIn 0.5s ease 1s;
/* → duration: 0.5s, delay: 1s と解釈される */

/* OK: 意図を明確にするなら個別指定が安全 */
animation-name: fadeIn;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-delay: 1s;
animation-fill-mode: forwards;

ポイント：ショートハンドで迷ったら、個別プロパティで指定しましょう。コードの可読性も上がり、デバッグも容易になります。特にanimation-fill-modeの指定忘れが「効かない」と感じる最大の原因です。

/* Bootstrap や Tailwind CSS に含まれるリセット */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 方法1: 動きが不要な場合のみ無効化 */
.decorative-animation {
  animation: float 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .decorative-animation {
    animation: none;
  }
}

/* 方法2: 動きを許可するユーザーのみアニメーション適用 */
.safe-animation {
  /* デフォルトではアニメーションなし */
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .safe-animation {
    animation: fadeIn 0.5s ease forwards;
    opacity: 0;
  }
}

/* 方法3: JavaScriptで検出 */
/* const prefersReduced = window.matchMedia(
     '(prefers-reduced-motion: reduce)'
   ).matches; */

ポイント：方法2の「prefers-reduced-motion: no-preferenceでのみアニメーション適用」が、アクセシビリティのベストプラクティスです。デフォルトはアニメーションなしで、動きを好むユーザーのみアニメーションが適用されます。

/* 自分のCSS：transition を設定 */
.button {
  transition: background-color 0.3s ease;
  background-color: #3b82f6;
}

/* フレームワークのCSS：transition を none に上書き */
.container .button {
  transition: none; /* 詳細度が高いため上書きされる */
}

CSS詳細度の計算ルール

• インラインスタイル: 1,0,0,0
• IDセレクタ (#id): 0,1,0,0
• クラスセレクタ (.class): 0,0,1,0
• 要素セレクタ (div): 0,0,0,1
• 数値が大きい方が優先される
• 同じ詳細度なら後に書かれた方が優先される

/* フレームワークのリセットCSS */
* {
  transition: none !important; /* すべてのtransitionを無効化 */
}

/* 対策1: 同じく !important で上書き（非推奨だが応急措置） */
.button {
  transition: background-color 0.3s ease !important;
}

/* 対策2: CSSの読み込み順序を調整 */
/* 自分のCSSをフレームワークの後に読み込む */

/* 対策3: @layer でカスケード層を制御（モダンな方法） */
@layer framework, custom;

@layer framework {
  /* フレームワークのスタイル */
}

@layer custom {
  /* 自分のスタイル（こちらが優先される） */
  .button {
    transition: background-color 0.3s ease;
  }
}

.sidebar {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.sidebar.open {
  transform: translateX(0);
}

/* モバイルでは transition を消してしまっている */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    /* transition の指定を忘れている → モバイルでアニメーションしない */
  }
}

/* 修正：メディアクエリ内でも transition を維持 */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    transition: transform 0.3s ease;
  }
}

/* Chrome DevTools での確認手順 */
1. F12 で DevTools を開く
2. 対象の要素を選択（Elements パネル）
3. Styles パネルで transition / animation を検索
4. 取り消し線が引かれているスタイルは上書きされている
5. Computed パネルで最終的に適用されている値を確認

/* 古い環境への対応が必要な場合 */
@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.element {
  -webkit-animation: fadeIn 0.5s ease forwards;
  animation: fadeIn 0.5s ease forwards;
}

ポイント：2024年現在、transitionとanimationの基本的なプロパティにベンダープレフィックスは不要です。ただし、ビルドツール（PostCSS + Autoprefixer）を使えば、必要に応じて自動的にプレフィックスを付与してくれます。

Can I Use で検索するキーワード:

css-transitions      → transition の基本サポート
css-animation        → animation の基本サポート
css-starting-style   → @starting-style のサポート
css-cascade-layers   → @layer のサポート
mdn-css_properties_transition-behavior → allow-discrete

/* CSS-only フェードパターン */
.fade-element {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease,
              visibility 0.3s ease;
}

.fade-element.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ページ読み込み時のフェードイン（animation版） */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

/* 複数要素を順番にフェードイン */
.fade-in-up:nth-child(1) { animation-delay: 0.1s; }
.fade-in-up:nth-child(2) { animation-delay: 0.2s; }
.fade-in-up:nth-child(3) { animation-delay: 0.3s; }

/* --- オーバーレイ --- */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease,
              visibility 0.3s ease;
  z-index: 999;
}

.drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* --- ドロワー本体 --- */
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}

.drawer.active {
  transform: translateX(0);
}

<!-- HTML -->
<details class="accordion">
  <summary>アコーディオンのタイトル</summary>
  <div class="accordion-body">
    <div class="accordion-inner">
      <p>アコーディオンのコンテンツ...</p>
    </div>
  </div>
</details>

/* CSS */
.accordion {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.accordion summary {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
}

.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.accordion[open] .accordion-body {
  grid-template-rows: 1fr;
}

.accordion-inner {
  overflow: hidden;
}

/* リフトアップ（浮き上がり）エフェクト */
.card-lift {
  transition: transform 0.2s ease,
              box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* スケールエフェクト */
.card-scale {
  transition: transform 0.2s ease;
}

.card-scale:hover {
  transform: scale(1.02);
}

/* ボーダーカラー変更 */
.card-border {
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.card-border:hover {
  border-color: #3b82f6;
}

/* ボタンの押し込みエフェクト */
.btn-press {
  transition: transform 0.1s ease;
}

.btn-press:active {
  transform: scale(0.95);
}

/* シンプルなスピナー */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ドットスピナー */
@keyframes dotPulse {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.dot-spinner {
  display: flex;
  gap: 8px;
}

.dot-spinner span {
  width: 12px;
  height: 12px;
  background: #3b82f6;
  border-radius: 50%;
  animation: dotPulse 1.4s ease-in-out infinite both;
}

.dot-spinner span:nth-child(1) { animation-delay: -0.32s; }
.dot-spinner span:nth-child(2) { animation-delay: -0.16s; }

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #f1f5f9 37%,
    #e2e8f0 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* 使い方 */
.skeleton-title {
  width: 60%;
  height: 24px;
  margin-bottom: 12px;
}

.skeleton-text {
  width: 100%;
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

Animations パネルの開き方

• F12 → DevTools を開く
• 右上の …（More tools）→ Animations を選択
• または Ctrl + Shift + P → 「Animations」と入力して検索
• パネルが開いたら、ページ上でアニメーションが発生すると自動的にキャプチャされる

Animations パネルでできること:

1. アニメーションのキャプチャ
   - ページ上のすべての transition/animation を記録
   - タイムラインで発火タイミングを確認

2. 再生速度の変更
   - 25% / 10% に減速して詳細な動きを確認
   - 一時停止してフレームごとに確認

3. タイミングの編集
   - ドラッグで duration や delay を調整
   - イージングカーブをビジュアルに編集

4. アニメーションの再生
   - キャプチャしたアニメーションを何度でも再生
   - フレームバイフレームで確認

transition が効かない場合のデバッグ手順:

Step 1: 要素を選択し、Computed タブで確認
  - transition-property が期待する値になっているか
  - transition-duration が 0s ではないか
  - 取り消し線が引かれていないか（上書きされていないか）

Step 2: Styles タブで優先度を確認
  - どのセレクタから transition が適用されているか
  - !important が付いていないか
  - 他のルールで transition: none が設定されていないか

Step 3: 対象プロパティの値を確認
  - 変化前と変化後の値が両方明示されているか
  - auto になっていないか
  - display: none が使われていないか

Step 4: Console でテスト
  - $0.style.transition で現在の inline style を確認
  - getComputedStyle($0).transition で計算後の値を確認

// 要素を選択した状態で（$0 = 選択中の要素）

// アニメーション情報を取得
$0.getAnimations();

// すべてのアニメーションを一時停止
document.getAnimations().forEach(a => a.pause());

// すべてのアニメーションを再生
document.getAnimations().forEach(a => a.play());

// アニメーション速度を25%に
document.getAnimations().forEach(a => {
  a.playbackRate = 0.25;
});

// 特定の要素のアニメーション詳細を確認
const animations = $0.getAnimations();
animations.forEach(a => {
  console.log('Name:', a.animationName);
  console.log('Duration:', a.effect.getTiming().duration);
  console.log('PlayState:', a.playState);
  console.log('CurrentTime:', a.currentTime);
});

ポイント：getAnimations()はWeb Animations APIの一部で、ページ上のすべてのCSSアニメーションとtransitionを取得できます。playStateが"idle"の場合、アニメーションが正しく開始していない（@keyframesが見つからない等）可能性があります。

transition が効かない場合のチェックリスト

• 対象のプロパティはアニメーション可能か？（display, position は不可）
• 変化前の値は明示的に設定されているか？（auto ではないか）
• transition-duration が 0s ではないか？
• 同一フレーム内で値を変更していないか？（reflow / ダブルRAF で解決）
• display: none からの復帰ではないか？（visibility + opacity で代替）
• 他のCSSルールで上書きされていないか？（DevToolsで確認）
• prefers-reduced-motion が有効ではないか？

animation が効かない場合のチェックリスト

• @keyframes の名前と animation-name は一致しているか？（大文字小文字含む）
• @keyframes の構文は正しいか？（% の付け忘れ等）
• animation-duration は 0s ではないか？（デフォルトは 0s）
• animation-fill-mode は正しいか？（forwards を忘れていないか）
• animation-play-state が paused になっていないか？
• ショートハンドの値の順序は正しいか？
• @keyframes がスコープ内にあるか？（CSS Modules 等）
• prefers-reduced-motion が有効ではないか？

/* NG: top/left をアニメーション（Layout発生） */
.move-bad {
  position: absolute;
  top: 0;
  left: 0;
  transition: top 0.3s, left 0.3s;
}
.move-bad:hover {
  top: 100px;
  left: 100px;
}

/* OK: transform を使用（Composite Only） */
.move-good {
  transition: transform 0.3s;
}
.move-good:hover {
  transform: translate(100px, 100px);
}

/* NG: width/height をアニメーション（Layout発生） */
.resize-bad {
  width: 100px;
  height: 100px;
  transition: width 0.3s, height 0.3s;
}

/* OK: transform: scale を使用（Composite Only） */
.resize-good {
  transition: transform 0.3s;
}
.resize-good:hover {
  transform: scale(1.5);
}

/* GPU レイヤーを明示的に作成（パフォーマンス向上） */
.gpu-accelerated {
  will-change: transform;
  /* または transform: translateZ(0); */
}

注意：will-changeはメモリを消費するため、常にすべての要素に設定するのは避けてください。アニメーションが実際に発生する要素にのみ設定し、アニメーション完了後にwill-change: autoに戻すのがベストプラクティスです。

パフォーマンス最適化のまとめ

• 位置の移動には top/left ではなく transform: translate() を使う
• サイズ変更には width/height ではなく transform: scale() を使う
• 表示/非表示には display ではなく opacity + visibility を使う
• アニメーション対象の要素に will-change を必要に応じて設定する
• 同時にアニメーションする要素数を最小限に抑える
• Chrome DevTools の Performance パネルでフレームレートを確認する