::view-transition-old を使ったページ遷移アニメーション

CSS疑似要素 ::view-transition-old の解説

この疑似要素を使うメリット

• ページ遷移時のアニメーションをより自然に表現できます。
• 遷移前の画面の一部を保持することで、ユーザーの視覚的な混乱を軽減できます。
• 遷移前の画面に要素を追加することで、情報伝達を強化できます。

::view-transition-old の使い方

対象となる要素に view-name プロパティを設定する

.header {
  view-name: header;
}

::view-transition-old 疑似要素を使ってスタイルを設定する

.header::view-transition-old {
  background-color: red;
  opacity: 0.5;
}

上記の場合、ページ遷移時の旧画面のヘッダー部分は、赤色で半透明に表示されます。

::view-transition-old で使用できるプロパティ

• animation-delay
• animation-duration
• animation-timing-function
• background
• border
• color
• opacity
• transform
• z-index

• ::view-transition-old は、::view-transition と組み合わせて使用することで、より複雑なアニメーションを作成できます。
• ::view-transition-old は、Chrome、Firefox、Safariなどの最新ブラウザでサポートされています。

補足

• 2024年3月23日現在、::view-transition-old はまだ 実験段階 の機能です。
• ブラウザによっては、::view-transition-old の実装が異なる場合があります。

::view-transition-old を使ったサンプルコード

<div class="container">
  <h1>タイトル</h1>
  <p>本文</p>
</div>

.container {
  view-name: container;
}

.container::view-transition-old {
  animation: fade-out 1s ease-in-out;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

上記の場合、ページ遷移時にコンテナ要素が徐々にフェードアウトします。

スライド

<div class="container">
  <h1>タイトル</h1>
  <p>本文</p>
</div>

.container {
  view-name: container;
}

.container::view-transition-old {
  animation: slide-out 1s ease-in-out;
}

@keyframes slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

上記の場合、ページ遷移時にコンテナ要素が左側にスライドアウトします。

スケール

<div class="container">
  <h1>タイトル</h1>
  <p>本文</p>
</div>

.container {
  view-name: container;
}

.container::view-transition-old {
  animation: scale-out 1s ease-in-out;
}

@keyframes scale-out {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}

上記の場合、ページ遷移時にコンテナ要素が縮小します。

複数のアニメーションを組み合わせる

<div class="container">
  <h1>タイトル</h1>
  <p>本文</p>
</div>

.container {
  view-name: container;
}

.container::view-transition-old {
  animation: fade-out-and-scale-out 1s ease-in-out;
}

@keyframes fade-out-and-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}

上記の場合、ページ遷移時にコンテナ要素が徐々にフェードアウトしながら縮小します。

画像の切り替え

<div class="container">
  <img src="image1.jpg" alt="画像1" />
</div>

.container {
  view-name: container;
}

.container::view-transition-old {
  animation: image-swap 1s ease-in-out;
}

@keyframes image-swap {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.container::view-transition {
  background-image: url("image2.jpg");
}

**上記の場合、ページ遷移時に画像1が徐々にフェードアウト

::view-transition-old の代替方法

::view-transition-old の代替方法として、以下の方法が考えられます。

JavaScript を使用して、ページ遷移時のアニメーションをプログラムできます。

CSS アニメーションを使用する

@keyframes を使用して、独自のアニメーションを作成できます。

ライブラリを使用する

ページ遷移時のアニメーションを作成するライブラリが多数存在します。

具体的な方法

JavaScript を使用する

<div id="container">
  <h1>タイトル</h1>
  <p>本文</p>
</div>

<script>
window.addEventListener("transitionstart", function(e) {
  if (e.target.id === "container") {
    // アニメーション処理
  }
});
</script>

上記の場合、#container 要素の遷移開始時に、JavaScript の transitionstart イベントが発生し、アニメーション処理を実行します。

CSS アニメーションを使用する

<div class="container">
  <h1>タイトル</h1>
  <p>本文</p>
</div>

.container {
  animation: fade-out 1s ease-in-out;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

上記の場合、container 要素に fade-out アニメーションを適用します。

ライブラリを使用する

Anime.js: https://animejs.com/ などのライブラリを使用して、ページ遷移時のアニメーションを作成できます。

ライブラリを使用するメリット

• 複雑なアニメーションを簡単に作成できる
• コード量を削減できる
• 様々なアニメーション効果を利用できる

ライブラリを使用するデメリット

• ライブラリの読み込みが必要
• 学習コストがかかる

::view-transition-old を使用したい場合は、ブラウザのサポート状況を確認する必要があります。

その他の方法

• ページ遷移時のアニメーションを表現する CSS プロパティ transition を使用する
• 画像の切り替えに background-image プロパティを使用する