/* 適切な使用例: アニメーション直前に適用 */
.card:hover {
  will-change: transform;
}
 
.card.animating {
  will-change: transform, opacity;
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}
 
/* アニメーション完了後に解除 */
.card.animating {
  /* transitionend イベントで will-change を解除する */
}

// JavaScript で will-change を適切に管理する例
const card = document.querySelector('.card');
 
card.addEventListener('mouseenter', () => {
  // ホバー時にレイヤー昇格を予約
  card.style.willChange = 'transform, opacity';
});
 
card.addEventListener('transitionend', () => {
  // アニメーション完了後にリソースを解放
  card.style.willChange = 'auto';
});

/* 個別プロパティ指定 */
.element {
  transition-property: transform, opacity, background-color;
  transition-duration: 300ms, 200ms, 150ms;
  transition-timing-function: ease-out, ease, linear;
  transition-delay: 0ms, 50ms, 100ms;
}
 
/* ショートハンド */
.element {
  transition:
    transform 300ms ease-out 0ms,
    opacity 200ms ease 50ms,
    background-color 150ms linear 100ms;
}
 
/* 全プロパティ一括指定（注意が必要） */
.element {
  transition: all 300ms ease-out;
  /* 意図しないプロパティもアニメーションされる可能性がある */
  /* 例: font-size の変更もアニメーションされてしまう */
}

const element = document.querySelector('.animated');
 
// Transition開始時（各プロパティごとに発火）
element.addEventListener('transitionstart', (e) => {
  console.log(`開始: ${e.propertyName}, 時間: ${e.elapsedTime}s`);
});
 
// Transition実行中（各イテレーション完了時。通常はtransitionでは1回）
element.addEventListener('transitionrun', (e) => {
  console.log(`実行中: ${e.propertyName}`);
});
 
// Transition完了時
element.addEventListener('transitionend', (e) => {
  console.log(`完了: ${e.propertyName}, 時間: ${e.elapsedTime}s`);
  // 完了後のクリーンアップ処理
  element.classList.remove('animating');
  element.style.willChange = 'auto';
});
 
// Transitionキャンセル時（途中で値が変わった場合）
element.addEventListener('transitioncancel', (e) => {
  console.log(`キャンセル: ${e.propertyName}`);
});

/* カードの入場アニメーション: 段階的に要素を表示 */
.card {
  opacity: 0;
  transform: translateY(30px);
}
 
.card.visible {
  opacity: 1;
  transform: translateY(0);
  /* opacity が先に完了し、その後 transform が完了する演出 */
  transition:
    opacity 200ms ease-out 0ms,
    transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1) 50ms;
}
 
/* リストアイテムの連鎖アニメーション */
.list-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}
 
.list-item.visible {
  opacity: 1;
  transform: translateX(0);
}
 
/* CSS変数を使ったスタッガー遅延 */
.list-item:nth-child(1) { transition-delay: calc(0 * 50ms); }
.list-item:nth-child(2) { transition-delay: calc(1 * 50ms); }
.list-item:nth-child(3) { transition-delay: calc(2 * 50ms); }
.list-item:nth-child(4) { transition-delay: calc(3 * 50ms); }
.list-item:nth-child(5) { transition-delay: calc(4 * 50ms); }
 
/* あるいは CSS カスタムプロパティでインラインに設定 */
.list-item {
  transition-delay: calc(var(--index) * 50ms);
}

// JavaScript でスタッガー遅延を設定
const items = document.querySelectorAll('.list-item');
items.forEach((item, index) => {
  item.style.setProperty('--index', index);
});
 
// IntersectionObserver でビューポート進入時にアニメーション
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        observer.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.1 }
);
 
items.forEach((item) => observer.observe(item));

/* 基本的なキーフレーム定義 */
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  60% {
    transform: translateX(10%);
    opacity: 1;
  }
  80% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(0);
  }
}
 
.panel {
  animation: slideInFromLeft 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
 
/* 複数アニメーションの組み合わせ */
@keyframes scaleUp {
  from { transform: scale(0.8); }
  to { transform: scale(1); }
}
 
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
.modal {
  animation:
    scaleUp 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    fadeIn 200ms ease-out forwards;
}

/* 実用例: モーダルの表示/非表示 */
@keyframes modalOpen {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
 
@keyframes modalClose {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
}
 
.modal.opening {
  animation: modalOpen 300ms ease-out forwards;
}
 
.modal.closing {
  animation: modalClose 200ms ease-in forwards;
}

/* animation-composition でアニメーション効果を累積できる */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
 
@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}
 
.icon {
  /* replace: 後のアニメーションが前のものを置き換える（デフォルト） */
  animation-composition: replace;
 
  /* add: 変換が加算される */
  animation-composition: add;
 
  /* accumulate: 数値が累積される */
  animation-composition: accumulate;
}

/* スクロール進捗インジケータ */
@keyframes progressBar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
 
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #3b82f6;
  transform-origin: left;
  animation: progressBar linear;
  animation-timeline: scroll(root block);
}
 
/* 要素がビューポートに入る時のアニメーション */
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 
.reveal-on-scroll {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}
 
/* パララックス効果 */
@keyframes parallax {
  from { transform: translateY(100px); }
  to { transform: translateY(-100px); }
}
 
.parallax-layer {
  animation: parallax linear;
  animation-timeline: scroll(root);
}

// パターン1: 基本的なアニメーションループ
function basicAnimation() {
  let x = 0;
  const element = document.querySelector('.box');
 
  function animate() {
    x += 2;
    element.style.transform = `translateX(${x}px)`;
 
    if (x < 300) {
      requestAnimationFrame(animate);
    }
  }
 
  requestAnimationFrame(animate);
}
 
// パターン2: タイムスタンプベース（推奨）
function timestampAnimation() {
  const element = document.querySelector('.box');
  const duration = 1000; // 1秒
  const distance = 300;  // 300px移動
  let startTime = null;
 
  function animate(timestamp) {
    if (startTime === null) startTime = timestamp;
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / duration, 1);
 
    // イージング関数を適用
    const eased = easeOutCubic(progress);
    element.style.transform = `translateX(${eased * distance}px)`;
 
    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }
 
  requestAnimationFrame(animate);
}
 
// パターン3: キャンセル可能なアニメーション
function cancellableAnimation() {
  const element = document.querySelector('.box');
  let animationId = null;
  let startTime = null;
  const duration = 2000;
 
  function animate(timestamp) {
    if (startTime === null) startTime = timestamp;
    const progress = Math.min((timestamp - startTime) / duration, 1);
 
    element.style.transform = `translateX(${progress * 300}px)`;
 
    if (progress < 1) {
      animationId = requestAnimationFrame(animate);
    }
  }
 
  // 開始
  animationId = requestAnimationFrame(animate);
 
  // 停止（任意のタイミングで呼べる）
  function stop() {
    if (animationId !== null) {
      cancelAnimationFrame(animationId);
      animationId = null;
    }
  }
 
  return { stop };
}

// 基本イージング関数集
const Easing = {
  // 線形
  linear: (t) => t,
 
  // Quad（2次曲線）
  easeInQuad: (t) => t * t,
  easeOutQuad: (t) => t * (2 - t),
  easeInOutQuad: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
 
  // Cubic（3次曲線）
  easeInCubic: (t) => t * t * t,
  easeOutCubic: (t) => 1 - Math.pow(1 - t, 3),
  easeInOutCubic: (t) =>
    t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
 
  // Elastic（弾性）
  easeOutElastic: (t) => {
    const c4 = (2 * Math.PI) / 3;
    return t === 0 ? 0 : t === 1 ? 1 :
      Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
  },
 
  // Bounce（バウンス）
  easeOutBounce: (t) => {
    const n1 = 7.5625;
    const d1 = 2.75;
    if (t < 1 / d1) {
      return n1 * t * t;
    } else if (t < 2 / d1) {
      return n1 * (t -= 1.5 / d1) * t + 0.75;
    } else if (t < 2.5 / d1) {
      return n1 * (t -= 2.25 / d1) * t + 0.9375;
    } else {
      return n1 * (t -= 2.625 / d1) * t + 0.984375;
    }
  },
 
  // Back（引き戻し）
  easeOutBack: (t) => {
    const c1 = 1.70158;
    const c3 = c1 + 1;
    return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
  },
 
  // Spring（バネ）
  spring: (t) => {
    return 1 - (Math.cos(t * Math.PI * 4.5) * Math.exp(-t * 6));
  }
};
 
// 使用例
function springAnimation(element, fromX, toX, duration) {
  let startTime = null;
 
  function animate(timestamp) {
    if (startTime === null) startTime = timestamp;
    const progress = Math.min((timestamp - startTime) / duration, 1);
    const eased = Easing.spring(progress);
    const x = fromX + (toX - fromX) * eased;
 
    element.style.transform = `translateX(${x}px)`;
 
    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }
 
  requestAnimationFrame(animate);
}

// 複数のアニメーションを効率的にバッチ処理するスケジューラ
class AnimationScheduler {
  constructor() {
    this.animations = new Map();
    this.isRunning = false;
    this.frameId = null;
  }
 
  add(id, updateFn) {
    this.animations.set(id, updateFn);
    if (!this.isRunning) {
      this.start();
    }
  }
 
  remove(id) {
    this.animations.delete(id);
    if (this.animations.size === 0) {
      this.stop();
    }
  }
 
  start() {
    this.isRunning = true;
    const tick = (timestamp) => {
      // 全アニメーションを1フレーム内でバッチ処理
      for (const [id, updateFn] of this.animations) {
        const shouldContinue = updateFn(timestamp);
        if (!shouldContinue) {
          this.animations.delete(id);
        }
      }
 
      if (this.animations.size > 0) {
        this.frameId = requestAnimationFrame(tick);
      } else {
        this.isRunning = false;
      }
    };
 
    this.frameId = requestAnimationFrame(tick);
  }
 
  stop() {
    if (this.frameId !== null) {
      cancelAnimationFrame(this.frameId);
      this.frameId = null;
    }
    this.isRunning = false;
    this.animations.clear();
  }
}
 
// 使用例
const scheduler = new AnimationScheduler();
 
// 複数要素のアニメーションを登録
document.querySelectorAll('.particle').forEach((el, i) => {
  let startTime = null;
  scheduler.add(`particle-${i}`, (timestamp) => {
    if (startTime === null) startTime = timestamp;
    const progress = (timestamp - startTime) / 2000;
    if (progress >= 1) return false; // アニメーション完了
 
    const x = Math.sin(progress * Math.PI * 2 + i) * 100;
    const y = Math.cos(progress * Math.PI * 2 + i) * 100;
    el.style.transform = `translate(${x}px, ${y}px)`;
    return true; // 継続
  });
});

/**
 * 汎用FLIP アニメーション関数
 * @param {HTMLElement} element - アニメーション対象要素
 * @param {Function} changeFn - DOM変更を行う関数
 * @param {Object} options - アニメーションオプション
 */
function flipAnimate(element, changeFn, options = {}) {
  const {
    duration = 300,
    easing = 'cubic-bezier(0.2, 0, 0.2, 1)',
    onComplete = null,
    scaleCorrection = true
  } = options;
 
  // First: 現在の位置・サイズを記録
  const first = element.getBoundingClientRect();
 
  // Last: DOM変更を適用し、最終位置を取得
  changeFn();
  const last = element.getBoundingClientRect();
 
  // 差分を計算
  const deltaX = first.left - last.left;
  const deltaY = first.top - last.top;
  const scaleX = first.width / last.width;
  const scaleY = first.height / last.height;
 
  // 変化がない場合はスキップ
  if (deltaX === 0 && deltaY === 0 && scaleX === 1 && scaleY === 1) {
    if (onComplete) onComplete();
    return;
  }
 
  // Invert: transform で元の位置に戻す
  const transform = scaleCorrection
    ? `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`
    : `translate(${deltaX}px, ${deltaY}px)`;
 
  element.style.transform = transform;
  element.style.transformOrigin = 'top left';
 
  // ブラウザに Invert 状態を認識させる
  // getComputedStyle().transform を読むことで強制的に再計算
  void element.offsetHeight;
 
  // Play: transform を解除してアニメーション
  element.style.transition = `transform ${duration}ms ${easing}`;
  element.style.transform = '';
 
  // 完了後のクリーンアップ
  function handleTransitionEnd(e) {
    if (e.propertyName !== 'transform') return;
    element.removeEventListener('transitionend', handleTransitionEnd);
    element.style.transition = '';
    element.style.transformOrigin = '';
    if (onComplete) onComplete();
  }
 
  element.addEventListener('transitionend', handleTransitionEnd);
}
 
// 使用例: リストのソートアニメーション
function sortListWithFlip(container, compareFn) {
  const items = Array.from(container.children);
 
  // First: 全要素の位置を記録
  const firstRects = new Map();
  items.forEach(item => {
    firstRects.set(item, item.getBoundingClientRect());
  });
 
  // Last: ソートを適用
  items.sort(compareFn);
  items.forEach(item => container.appendChild(item));
 
  // 各要素にFLIPを適用
  items.forEach(item => {
    const first = firstRects.get(item);
    const last = item.getBoundingClientRect();
 
    const deltaX = first.left - last.left;
    const deltaY = first.top - last.top;
 
    if (deltaX === 0 && deltaY === 0) return;
 
    item.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
 
    requestAnimationFrame(() => {
      item.style.transition = 'transform 300ms ease-out';
      item.style.transform = '';
 
      item.addEventListener('transitionend', () => {
        item.style.transition = '';
      }, { once: true });
    });
  });
}

// リスト項目の追加アニメーション
function addItemWithFlip(container, newElement, referenceNode = null) {
  // First: 既存要素の位置を記録
  const existingItems = Array.from(container.children);
  const firstRects = new Map();
  existingItems.forEach(item => {
    firstRects.set(item, item.getBoundingClientRect());
  });
 
  // Last: 新要素を挿入
  if (referenceNode) {
    container.insertBefore(newElement, referenceNode);
  } else {
    container.appendChild(newElement);
  }
 
  // 新要素のアニメーション
  newElement.style.opacity = '0';
  newElement.style.transform = 'scale(0.8)';
 
  requestAnimationFrame(() => {
    newElement.style.transition = 'opacity 200ms ease-out, transform 200ms ease-out';
    newElement.style.opacity = '1';
    newElement.style.transform = 'scale(1)';
  });
 
  // 既存要素のFLIPアニメーション
  existingItems.forEach(item => {
    const first = firstRects.get(item);
    const last = item.getBoundingClientRect();
    const deltaY = first.top - last.top;
 
    if (deltaY === 0) return;
 
    item.style.transform = `translateY(${deltaY}px)`;
 
    requestAnimationFrame(() => {
      item.style.transition = 'transform 300ms ease-out';
      item.style.transform = '';
      item.addEventListener('transitionend', () => {
        item.style.transition = '';
      }, { once: true });
    });
  });
}
 
// リスト項目の削除アニメーション
function removeItemWithFlip(container, targetElement) {
  // First: 全要素の位置を記録
  const items = Array.from(container.children);
  const firstRects = new Map();
  items.forEach(item => {
    firstRects.set(item, item.getBoundingClientRect());
  });
 
  // 削除対象のフェードアウト
  targetElement.style.transition = 'opacity 150ms ease-in, transform 150ms ease-in';
  targetElement.style.opacity = '0';
  targetElement.style.transform = 'scale(0.8)';
 
  targetElement.addEventListener('transitionend', () => {
    // 要素を削除
    container.removeChild(targetElement);
 
    // 残りの要素にFLIPを適用
    items.filter(item => item !== targetElement).forEach(item => {
      const first = firstRects.get(item);
      const last = item.getBoundingClientRect();
      const deltaY = first.top - last.top;
 
      if (deltaY === 0) return;
 
      item.style.transform = `translateY(${deltaY}px)`;
 
      requestAnimationFrame(() => {
        item.style.transition = 'transform 300ms ease-out';
        item.style.transform = '';
        item.addEventListener('transitionend', () => {
          item.style.transition = '';
        }, { once: true });
      });
    });
  }, { once: true });
}

// Element.animate() による基本アニメーション
const element = document.querySelector('.box');
 
const animation = element.animate(
  // キーフレーム配列
  [
    { transform: 'translateX(0)', opacity: 1 },
    { transform: 'translateX(300px)', opacity: 0.5 },
    { transform: 'translateX(300px) rotate(180deg)', opacity: 1 }
  ],
  // タイミングオプション
  {
    duration: 1000,
    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
    iterations: 1,
    fill: 'forwards',
    delay: 0
  }
);
 
// アニメーションの制御
animation.pause();           // 一時停止
animation.play();            // 再生
animation.reverse();         // 逆再生
animation.cancel();          // キャンセル
animation.finish();          // 即完了
 
// 再生速度の変更
animation.playbackRate = 2;  // 2倍速
animation.playbackRate = 0.5; // 半速
animation.playbackRate = -1;  // 逆再生
 
// 現在の進捗を取得・設定
console.log(animation.currentTime);  // 現在の経過時間(ms)
animation.currentTime = 500;         // 500msの位置にシーク
 
// 完了を待つ Promise
animation.finished.then(() => {
  console.log('アニメーション完了');
  element.classList.add('final-state');
});
 
// async/await パターン
async function animateSequence() {
  const el = document.querySelector('.box');
 
  await el.animate(
    [{ transform: 'scale(1)' }, { transform: 'scale(1.2)' }],
    { duration: 200, fill: 'forwards' }
  ).finished;
 
  await el.animate(
    [{ transform: 'scale(1.2)' }, { transform: 'scale(1)' }],
    { duration: 150, fill: 'forwards' }
  ).finished;
 
  console.log('全アニメーション完了');
}

// 複数要素の連鎖アニメーション
function staggeredReveal(elements, options = {}) {
  const {
    duration = 400,
    stagger = 50,
    easing = 'cubic-bezier(0.22, 1, 0.36, 1)',
    distance = 30
  } = options;
 
  const animations = Array.from(elements).map((el, index) => {
    return el.animate(
      [
        {
          opacity: 0,
          transform: `translateY(${distance}px)`
        },
        {
          opacity: 1,
          transform: 'translateY(0)'
        }
      ],
      {
        duration,
        easing,
        delay: index * stagger,
        fill: 'both'
      }
    );
  });
 
  // 全アニメーション完了を待つ
  return Promise.all(animations.map(a => a.finished));
}
 
// 使用例
const cards = document.querySelectorAll('.card');
staggeredReveal(cards, { stagger: 80, distance: 40 }).then(() => {
  console.log('全カードの表示アニメーション完了');
});

// 記法1: 配列形式（各フレームを個別オブジェクトで定義）
element.animate([
  { transform: 'rotate(0deg)', offset: 0 },
  { transform: 'rotate(360deg)', offset: 0.7 },
  { transform: 'rotate(360deg) scale(1.2)', offset: 0.85 },
  { transform: 'rotate(360deg) scale(1)', offset: 1 }
], { duration: 800 });
 
// 記法2: オブジェクト形式（プロパティごとに値の配列）
element.animate({
  transform: [
    'translateX(0)',
    'translateX(200px)',
    'translateX(200px) rotate(90deg)',
    'translateX(0) rotate(0deg)'
  ],
  opacity: [1, 0.8, 0.6, 1],
  offset: [0, 0.3, 0.7, 1],
  easing: ['ease-in', 'ease-out', 'ease-in-out']
}, { duration: 1200, iterations: Infinity });
 
// composite オプションによるアニメーション合成
const baseAnimation = element.animate(
  [{ transform: 'translateX(0)' }, { transform: 'translateX(200px)' }],
  { duration: 2000, iterations: Infinity, composite: 'replace' }
);
 
const additiveAnimation = element.animate(
  [{ transform: 'translateY(0)' }, { transform: 'translateY(50px)' }],
  { duration: 1000, iterations: Infinity, composite: 'add' }
);
// 結果: X方向とY方向の動きが合成される

// 基本的なView Transition
async function updateContent(newContent) {
  // startViewTransition は DOM 変更を引数として受け取る
  const transition = document.startViewTransition(() => {
    document.querySelector('.content').innerHTML = newContent;
  });
 
  // 遷移の完了を待つことが可能
  await transition.finished;
  console.log('View Transition 完了');
}
 
// View Transition のライフサイクル
const transition = document.startViewTransition(async () => {
  // この関数内でDOM変更を行う
  await fetchAndUpdateDOM();
});
 
// 各フェーズのPromise
transition.ready.then(() => {
  // 擬似要素ツリーが構築され、アニメーション開始直前
  console.log('アニメーション準備完了');
});
 
transition.updateCallbackDone.then(() => {
  // DOM更新コールバックが完了した
  console.log('DOM更新完了');
});
 
transition.finished.then(() => {
  // 全アニメーションが完了した
  console.log('View Transition 完了');
});

/* デフォルトのクロスフェードをカスタマイズ */
::view-transition-old(root) {
  animation-duration: 250ms;
  animation-timing-function: ease-in;
}
 
::view-transition-new(root) {
  animation-duration: 250ms;
  animation-timing-function: ease-out;
}
 
/* 特定の要素に名前を付けて個別制御 */
.hero-image {
  view-transition-name: hero;
}
 
.page-title {
  view-transition-name: title;
}
 
/* 名前付き要素のアニメーションをカスタマイズ */
::view-transition-old(hero) {
  animation: slideOutLeft 300ms ease-in forwards;
}
 
::view-transition-new(hero) {
  animation: slideInRight 300ms ease-out forwards;
}
 
::view-transition-group(title) {
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
 
@keyframes slideOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}
 
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

<!-- ページ間遷移でのView Transitions -->
<!-- ページ A の head に追加 -->
<meta name="view-transition" content="same-origin" />
 
<!-- ページ B の head にも追加 -->
<meta name="view-transition" content="same-origin" />

/* ページ間で共有する要素に同じ名前を付ける */
/* ページ A */
.product-image-123 {
  view-transition-name: product-123;
}
 
/* ページ B */
.product-detail-image {
  view-transition-name: product-123;
}
 
/* ナビゲーション方向に応じたアニメーション */
@view-transition {
  navigation: auto;
}
 
/* 進む方向のアニメーション */
::view-transition-old(root) {
  animation: slide-out-to-left 300ms ease-in;
}
::view-transition-new(root) {
  animation: slide-in-from-right 300ms ease-out;
}
 
/* Navigation API と組み合わせて戻る方向を検出 */
@keyframes slide-out-to-left {
  to { transform: translateX(-30%); opacity: 0; }
}
 
@keyframes slide-in-from-right {
  from { transform: translateX(30%); opacity: 0; }
}

// フレームレートの計測
class FPSMonitor {
  constructor() {
    this.frames = [];
    this.isRunning = false;
  }
 
  start() {
    this.isRunning = true;
    this.frames = [];
    this.lastTime = performance.now();
    this.tick();
  }
 
  tick() {
    if (!this.isRunning) return;
 
    const now = performance.now();
    const delta = now - this.lastTime;
    this.lastTime = now;
 
    this.frames.push({
      timestamp: now,
      frameDuration: delta,
      fps: 1000 / delta
    });
 
    // 直近60フレームのみ保持
    if (this.frames.length > 60) {
      this.frames.shift();
    }
 
    requestAnimationFrame(() => this.tick());
  }
 
  stop() {
    this.isRunning = false;
  }
 
  getAverageFPS() {
    if (this.frames.length === 0) return 0;
    const totalFPS = this.frames.reduce((sum, f) => sum + f.fps, 0);
    return totalFPS / this.frames.length;
  }
 
  getDroppedFrames() {
    // 16.67ms * 1.5 = 25ms 以上のフレームをドロップとみなす
    return this.frames.filter(f => f.frameDuration > 25).length;
  }
 
  getReport() {
    const durations = this.frames.map(f => f.frameDuration);
    return {
      averageFPS: this.getAverageFPS().toFixed(1),
      droppedFrames: this.getDroppedFrames(),
      totalFrames: this.frames.length,
      maxFrameDuration: Math.max(...durations).toFixed(1),
      minFrameDuration: Math.min(...durations).toFixed(1),
      p95FrameDuration: this.percentile(durations, 95).toFixed(1)
    };
  }
 
  percentile(arr, p) {
    const sorted = [...arr].sort((a, b) => a - b);
    const index = Math.ceil(sorted.length * p / 100) - 1;
    return sorted[index];
  }
}
 
// 使用例
const monitor = new FPSMonitor();
monitor.start();
 
// アニメーション実行...
 
setTimeout(() => {
  monitor.stop();
  console.table(monitor.getReport());
}, 3000);

// Long Task の検出と記録
const longTaskObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.warn(
      `Long Task 検出: ${entry.duration.toFixed(1)}ms`,
      `名前: ${entry.name}`,
      `開始: ${entry.startTime.toFixed(1)}ms`
    );
 
    // 50ms以上のタスクはアニメーションに影響を与える可能性がある
    if (entry.duration > 100) {
      console.error(
        `致命的なLong Task: ${entry.duration.toFixed(1)}ms - ` +
        `約${Math.floor(entry.duration / 16.67)}フレーム分のジャンクが発生`
      );
    }
  }
});
 
longTaskObserver.observe({ type: 'longtask', buffered: true });
 
// Layout Shift の検出
const clsObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.warn(`Layout Shift: ${entry.value.toFixed(4)}`, entry.sources);
    }
  }
});
 
clsObserver.observe({ type: 'layout-shift', buffered: true });

// アニメーションフレームのタイミングをオーバーレイ表示
class FrameTimingOverlay {
  constructor() {
    this.canvas = document.createElement('canvas');
    this.canvas.width = 200;
    this.canvas.height = 80;
    this.canvas.style.cssText = `
      position: fixed; top: 10px; right: 10px; z-index: 99999;
      background: rgba(0,0,0,0.7); border-radius: 4px;
      pointer-events: none;
    `;
    document.body.appendChild(this.canvas);
    this.ctx = this.canvas.getContext('2d');
    this.frameTimes = [];
    this.lastTime = 0;
    this.running = false;
  }
 
  start() {
    this.running = true;
    this.lastTime = performance.now();
    this.loop();
  }
 
  loop() {
    if (!this.running) return;
    const now = performance.now();
    const dt = now - this.lastTime;
    this.lastTime = now;
    this.frameTimes.push(dt);
    if (this.frameTimes.length > 100) this.frameTimes.shift();
    this.draw();
    requestAnimationFrame(() => this.loop());
  }
 
  draw() {
    const { ctx, canvas } = this;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
    // FPS テキスト
    const fps = this.frameTimes.length > 0
      ? (1000 / (this.frameTimes.reduce((a, b) => a + b) / this.frameTimes.length))
      : 0;
    ctx.fillStyle = fps >= 55 ? '#4ade80' : fps >= 30 ? '#fbbf24' : '#ef4444';
    ctx.font = '14px monospace';
    ctx.fillText(`${fps.toFixed(0)} FPS`, 10, 18);
 
    // バーグラフ
    const barWidth = (canvas.width - 20) / this.frameTimes.length;
    this.frameTimes.forEach((dt, i) => {
      const height = Math.min(dt / 33.33 * 40, 50);
      const x = 10 + i * barWidth;
      const y = canvas.height - 10 - height;
 
      ctx.fillStyle = dt <= 16.67 ? '#4ade80' :
                      dt <= 25 ? '#fbbf24' : '#ef4444';
      ctx.fillRect(x, y, Math.max(barWidth - 1, 1), height);
    });
 
    // 16.67ms ライン
    const lineY = canvas.height - 10 - (16.67 / 33.33 * 40);
    ctx.strokeStyle = 'rgba(255,255,255,0.3)';
    ctx.setLineDash([4, 4]);
    ctx.beginPath();
    ctx.moveTo(10, lineY);
    ctx.lineTo(canvas.width - 10, lineY);
    ctx.stroke();
    ctx.setLineDash([]);
  }
 
  stop() {
    this.running = false;
    this.canvas.remove();
  }
}

/* アプローチ1: 動きを完全に除去 */
@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;
  }
}
 
/* アプローチ2: 動きの種類を選択的に制御（推奨） */
@media (prefers-reduced-motion: reduce) {
  /* 移動・回転・スケールは除去 */
  .animated-element {
    transform: none !important;
    transition: opacity 200ms ease-out;
  }
 
  /* フェード効果は残す（動きではないので問題が少ない） */
  .fade-in {
    transition: opacity 200ms ease-out;
  }
 
  /* スクロール連動アニメーションは除去 */
  .scroll-animation {
    animation: none !important;
  }
}
 
/* アプローチ3: モーション前提ではなく、オプトインにする */
/* ベース: アニメーションなし */
.card {
  /* 静的なスタイルのみ */
}
 
/* 動きを許可したユーザーにのみアニメーションを適用 */
@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: transform 300ms ease-out, opacity 300ms ease-out;
  }
 
  .card:hover {
    transform: translateY(-4px);
  }
}

// メディアクエリの状態を検出
const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
);
 
// 初期値を取得
if (prefersReducedMotion.matches) {
  console.log('ユーザーはモーション軽減を要求している');
}
 
// 設定変更を監視
prefersReducedMotion.addEventListener('change', (event) => {
  if (event.matches) {
    // モーション軽減に切り替わった → アニメーションを停止
    stopAllAnimations();
  } else {
    // モーション軽減が解除された → アニメーションを有効化
    enableAnimations();
  }
});
 
// アニメーション関数にモーション軽減を組み込む
function animateElement(element, keyframes, options) {
  if (prefersReducedMotion.matches) {
    // モーション軽減時: 即座に最終状態を適用
    const lastKeyframe = keyframes[keyframes.length - 1];
    Object.assign(element.style, lastKeyframe);
    return { finished: Promise.resolve() };
  }
 
  return element.animate(keyframes, options);
}
 
// フレームワーク向けカスタムフック例（React風の擬似コード）
function useReducedMotion() {
  const query = window.matchMedia('(prefers-reduced-motion: reduce)');
  let matches = query.matches;
 
  query.addEventListener('change', (e) => {
    matches = e.matches;
    // 状態更新をトリガー
  });
 
  return matches;
}

/* ボタンの押下フィードバック */
.button {
  transform: scale(1);
  transition: transform 100ms ease-out;
}
 
.button:active {
  transform: scale(0.96);
  transition-duration: 50ms;
}
 
/* トグルスイッチ */
.toggle-track {
  width: 48px;
  height: 24px;
  border-radius: 12px;
  background: #d1d5db;
  transition: background-color 200ms ease;
  position: relative;
}
 
.toggle-track.active {
  background: #3b82f6;
}
 
.toggle-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
 
.toggle-track.active .toggle-thumb {
  transform: translateX(24px);
}
 
/* スケルトンスクリーンのシマー効果 */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
 
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}
 
/* ローディングスピナー */
@keyframes spin {
  to { transform: rotate(360deg); }
}
 
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

// スライド遷移（SPA向け）
async function slideTransition(direction, updateFn) {
  if (!document.startViewTransition) {
    // View Transitions API 非対応時のフォールバック
    updateFn();
    return;
  }
 
  // 方向に応じたCSSクラスを設定
  document.documentElement.dataset.transition = direction;
 
  const transition = document.startViewTransition(async () => {
    await updateFn();
  });
 
  await transition.finished;
  delete document.documentElement.dataset.transition;
}

/* スライド方向の制御 */
[data-transition="forward"] ::view-transition-old(root) {
  animation: slide-out-left 300ms ease-in forwards;
}
 
[data-transition="forward"] ::view-transition-new(root) {
  animation: slide-in-right 300ms ease-out forwards;
}
 
[data-transition="back"] ::view-transition-old(root) {
  animation: slide-out-right 300ms ease-in forwards;
}
 
[data-transition="back"] ::view-transition-new(root) {
  animation: slide-in-left 300ms ease-out forwards;
}
 
@keyframes slide-out-left {
  to { transform: translateX(-30%); opacity: 0; }
}
@keyframes slide-in-right {
  from { transform: translateX(30%); opacity: 0; }
}
@keyframes slide-out-right {
  to { transform: translateX(30%); opacity: 0; }
}
@keyframes slide-in-left {
  from { transform: translateX(-30%); opacity: 0; }
}

// ---- 悪い例: レイアウトスラッシング ----
function badResizeItems(items) {
  items.forEach((item) => {
    // 読み取り → 強制レイアウト発生！
    const height = item.offsetHeight;
    // 書き込み → レイアウトを無効化
    item.style.height = (height * 1.2) + 'px';
    // 次のループの読み取りで再び強制レイアウト...
  });
  // N個の要素があれば N回の強制レイアウトが発生する
}
 
// ---- 良い例: 読み取りと書き込みを分離 ----
function goodResizeItems(items) {
  // Phase 1: 全ての読み取りをまとめて行う
  const heights = items.map((item) => item.offsetHeight);
 
  // Phase 2: 全ての書き込みをまとめて行う（レイアウトは1回のみ）
  items.forEach((item, i) => {
    item.style.height = (heights[i] * 1.2) + 'px';
  });
}

// fastdom ライブラリのようなパターンで読み書きを分離
class DOMBatcher {
  constructor() {
    this.reads = [];
    this.writes = [];
    this.scheduled = false;
  }
 
  read(fn) {
    this.reads.push(fn);
    this.schedule();
  }
 
  write(fn) {
    this.writes.push(fn);
    this.schedule();
  }
 
  schedule() {
    if (this.scheduled) return;
    this.scheduled = true;
 
    requestAnimationFrame(() => {
      // まず全ての読み取りを実行
      const readResults = this.reads.map((fn) => fn());
      this.reads = [];
 
      // 次に全ての書き込みを実行
      this.writes.forEach((fn) => fn());
      this.writes = [];
 
      this.scheduled = false;
    });
  }
}
 
const batcher = new DOMBatcher();
 
// 使用例: 読み取りと書き込みを安全に分離
function animateCards(cards) {
  cards.forEach((card) => {
    batcher.read(() => {
      const rect = card.getBoundingClientRect();
      batcher.write(() => {
        card.style.transform = `translateY(${rect.top * 0.1}px)`;
      });
    });
  });
}

/* ---- 悪い例: will-change を全要素に常時適用 ---- */
* {
  will-change: transform, opacity;
  /* 全要素がGPUレイヤーに昇格 → メモリ枯渇 */
}
 
.every-list-item {
  will-change: transform;
  /* 1000個のリストアイテムそれぞれがレイヤーになる */
}
 
/* ---- 良い例: 必要な時に必要な要素にだけ適用 ---- */
.card {
  /* 通常時は will-change なし */
}
 
.card:hover {
  will-change: transform;
  /* ホバー時にのみ昇格 */
}
 
/* さらに良い例: JavaScript で動的に制御 */

// will-change の適切なライフサイクル管理
class WillChangeManager {
  constructor(element, properties) {
    this.element = element;
    this.properties = properties;
    this.isActive = false;
  }
 
  // アニメーション開始の少し前に準備
  prepare() {
    if (this.isActive) return;
    this.element.style.willChange = this.properties;
    this.isActive = true;
  }
 
  // アニメーション完了後に解除
  cleanup() {
    if (!this.isActive) return;
    this.element.style.willChange = 'auto';
    this.isActive = false;
  }
 
  // transitionend と連動する自動管理
  autoManage() {
    this.element.addEventListener('mouseenter', () => this.prepare());
    this.element.addEventListener('transitionend', () => this.cleanup());
    this.element.addEventListener('mouseleave', () => {
      // マウスが離れた後、遷移が終わればクリーンアップ
      requestAnimationFrame(() => {
        if (!this.element.matches(':hover')) {
          this.cleanup();
        }
      });
    });
  }
}

// ---- 悪い例: setInterval でアニメーション ----
let x = 0;
const intervalId = setInterval(() => {
  x += 2;
  element.style.left = x + 'px'; // Layout を毎回トリガー
  if (x >= 300) clearInterval(intervalId);
}, 16); // 16msはフレームとずれる
 
// 問題点:
// 1. setInterval のタイミングはフレームと同期しない
// 2. 非アクティブタブでも実行され続ける
// 3. 処理が遅延した場合、コールバックが溜まる
// 4. left プロパティは Layout を毎フレーム発生させる
 
// ---- 良い例: rAF + transform ----
let startTime = null;
const duration = 2500;
 
function animate(timestamp) {
  if (startTime === null) startTime = timestamp;
  const progress = Math.min((timestamp - startTime) / duration, 1);
  const eased = Easing.easeOutCubic(progress);
 
  element.style.transform = `translateX(${eased * 300}px)`;
 
  if (progress < 1) {
    requestAnimationFrame(animate);
  }
}
 
requestAnimationFrame(animate);

// ---- 悪い例: フレーム単位の固定値移動 ----
function badAnimate() {
  x += 5; // 60Hzでは300px/s、120Hzでは600px/s になってしまう
  element.style.transform = `translateX(${x}px)`;
  if (x < 300) requestAnimationFrame(badAnimate);
}
 
// ---- 良い例: 経過時間ベースの移動（デルタタイム） ----
function goodAnimate(timestamp) {
  if (!lastTimestamp) lastTimestamp = timestamp;
  const deltaTime = timestamp - lastTimestamp;
  lastTimestamp = timestamp;
 
  // 速度: 300px/秒（ディスプレイリフレッシュレートに依存しない）
  const speed = 300; // px per second
  x += speed * (deltaTime / 1000);
 
  element.style.transform = `translateX(${Math.min(x, 300)}px)`;
  if (x < 300) requestAnimationFrame(goodAnimate);
}
 
// ---- 最良の例: duration ベースの正規化 ----
function bestAnimate(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;
  const progress = Math.min(elapsed / 1000, 1); // 1秒間で完了
  const eased = Easing.easeOutCubic(progress);
 
  element.style.transform = `translateX(${eased * 300}px)`;
  if (progress < 1) requestAnimationFrame(bestAnimate);
}
// この方式なら60Hz, 120Hz, 144Hz いずれでも同じ1秒で300px移動する