View Transitions API

概要

ページ遷移やDOM更新時のアニメーションはこれまでJSライブラリに頼るしかなかった。View Transitions API を使うと、ブラウザが自動でスナップショットを撮り、CSSアニメーションでトランジションを行う。MPAでも使用可能。

対応ブラウザ

基本構文

document.startViewTransition(() => {
  updateDOMSomehow();
});

::view-transition-old(root) {
  animation: fade-out 0.3s ease;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease;
}

.hero-image {
  view-transition-name: hero;
}

実務での使いどころ

• ページ遷移アニメーション

  MPAでもSPAでも、ページ間のシームレスなトランジションをCSSだけで定義できる。

• 画像の共有要素トランジション

  一覧のサムネイルが詳細ページの大きな画像に滑らかに変形するHero Transition。

注意点

フォールバック戦略

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

アクセシビリティ

• prefers-reduced-motion: reduce を必ずハンドリングし、動きを無効化できるようにする。
• アニメーション中もコンテンツにアクセスできるようにする。

参考リンク

• MDN Web Docs — View Transitions API
• Can I use — View Transitions