@view-transition
Turns on animated transitions between pages of the same site.
Syntax
@view-transition { navigation: auto; }Parameters
| Parameter | Type | Description |
|---|---|---|
| navigation | auto | none | `auto` — animate navigation between pages of the same origin. |
Examples
The rule that enables transitions (it must be on both the old and the new page):
<style>
@view-transition { navigation: auto; }
body { font-family: sans-serif; }
</style>
<p>On a real site this rule, added to every page, makes navigation between pages crossfade smoothly.</p>
<p><a href="#">A link to another page of the same site</a></p>Notes
By default the pages crossfade; elements with the same view-transition-name on both pages fly from one place to the other. Works in Chrome, Edge and Safari; in other browsers the pages simply change without animation.
See also
- view-transition-name — Gives an element a name so that a view transition animates it separately from the rest of the page.
- animation — Runs a `@keyframes` animation on an element.
In the tutorial
- View Transitions — Smoothly changing page states — document.startViewTransition(), the view-transition-name property, the ::view-transition pseudo-elements and transitions between pages.