| ルール名 | @view-transition |
|---|---|
| 構文 | @view-transition { navigation: ... } |
| サポート | https://caniuse.com/mdn-css_at-rules_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>