【CSS】View Transitionsでなめらかに遷移

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

View Transitionsを使って画面遷移をなめらかに行う方法について。

View Transitions API

View Transitionsとは、画面遷移を行う際にふわっとなめらかに遷移できる機能のことです。

Chrome111以上、Edge111以以上、Safari18以上 から使用できます。

基本的には以下のCSSだけでも実装できます。

@view-transition {
  navigation: auto;
}

例えばindex.htmlにあるボタンをクリックしたらabout.htmlに遷移させる際に、ふわっとアニメーションしながら遷移するようになります。

アニメーションをもっと調整するなら以下のように調整できます。

<div class="container">
    <h1>トップ</h1>
    <a href="about.html">アバウトページへ</a>
  </div>
<div class="container">
    <h1>アバウトページ</h1>
    <a href="index.html">トップページへ</a>
  </div>
@view-transition {
  navigation: auto;
}


::view-transition-old(page),
::view-transition-new(page) {
  animation-duration: .5s;
}

::view-transition-old(page) {
  animation-name: fade-out;
}

::view-transition-new(page) {
  animation-name: fade-in;
}

.container {
  view-transition-name: page;
}

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

  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

view-transition-oldは遷移前のページ、view-transition-new(page)は遷移後のページです。

以下の部分でアニメーション設定します。（keyframeと組み合わせ）

::view-transition-old(page) {
  animation-name: fade-out;
}

::view-transition-new(page) {
  animation-name: fade-in;
}

View Transitionの対象となる要素に対して、view-transition-nameを指定します。

.container {
  view-transition-name: page;
}

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧