CSS - @view-transition

• トップ
• CSSリファレンス
• @view-transition

概要

説明

複数のページ間にまたがるアニメーションを実現します。

@view-transition {
  navigation: auto;
}

使用例

• @view-transtion { navigation: auto; } でビュートランジションを使用することを宣言します。
• view-transition-name で遷移元の要素と遷移先の要素に同じ名前をつけます。
• これだけで、遷移元ページと遷移先ページで同じ名前を持つ要素が自動的にトランジションされます。

<style>
@view-transition {
  navigation: auto;
}
#my-example img {
  width: 160px;
  height: 107px;
}
#img1 {
  view-transition-name: img-1;
}
#img2 {
  view-transition-name: img-2;
}
</style>

<div id="my-example">
  <a href="detail-1.html"><img id="img1" src="image1.jpg" alt="image1"></a>
  <a href="detail-2.html"><img id="img2" src="image2.jpg" alt="image2"></a>
</div>

<style>
@view-transition {
  navigation: auto;
}
#img1 {
  view-transition-name: img-1;
  width: 90vw;
}
</style>

<div id="my-example">
  <a href="index.html"><img id="img1" src="image1.jpg" alt="image1"></a>
</div>

<style>
@view-transition {
  navigation: auto;
}
#img2 {
  view-transition-name: img-2;
  width: 90vw;
}
</style>

<div id="my-example">
  <a href="index.html"><img id="img2" src="image2.jpg" alt="image2"></a>
</div>

関連項目

• view-transition-name
• ::view-transition
• ::view-transition-group()
• ::view-transition-image-pair()
• ::view-transition-old()
• ::view-transition-new()

リンク

• https://drafts.csswg.org/css-view-transitions-2/#view-transition-rule
• https://developer.mozilla.org/ja/docs/Web/CSS/@view-transition
• https://caniuse.com/mdn-css_at-rules_view-transition