# Page transition

One page fades into the next when a visitor follows a link, in browsers that support it, with nothing to write but a link to one stylesheet.

### Known issues
Browsers that play it: Chrome and Edge 126 or later, and Safari 18.2 or later. Firefox does not play it yet (checked in Firefox 155): the page changes at once, as it did before.

It plays only between two pages of the same site that both link the stylesheet, when the visitor follows a link or presses Back or Forward. It does not play on a first visit, on a reload or when the visitor types an address.

### Copy the markup
Link the stylesheet in the `<head>` of every page, after core: the lines above. Nothing in the body changes; an ordinary link to another page of the site is enough.

Link markup
```html
<a href="/docs/">Documentation</a>
```

### Variants and options
There are none: one fixed transition, with no setting and no control.

- `@view-transition`: With `navigation: auto`, the page opts in. Both pages of a navigation must have it
- `::view-transition-old(root)`, `::view-transition-new(root)`: The page before and the page after cross-fade. Their duration is `--luz-duration-base` and their easing `--luz-easing-standard`

### How it works
CSS from `@luz-ds/catalog`, with no JavaScript. The browser takes a picture of the page you leave and of the page you arrive at, and fades from one to the other.

- Everything is inside `@media (prefers-reduced-motion: no-preference)`, the `@view-transition` rule too. When a reader asks for reduced motion, no transition starts.
- It is the whole page that fades. Nothing slides, and the header and the sidebar have no name of their own.
- The reader’s colour mode is set before the first paint of every page, so the fade never shows another mode.
- The page cannot be used for the 0.2 seconds the fade lasts.

### Without JavaScript
Nothing changes: there is no script.

### Keyboard and ARIA
- **Focus:** it lands where it would without the transition, at the start of the new page. Skip links and anchors work as before.
- **Screen readers:** nothing is added or announced; the new page’s title and content are read as on any navigation.

### When to use
Use it on a site where visitors go through several pages and you want the change to feel softer, with no work beyond one link.

### When not to use
Do not use it to animate a part of the page, such as a header that stays still or a picture that grows into the next page: that needs a `view-transition-name` on each, and is yours to write.

- Do not use it where a page change should look instant, such as a form you fill in many times.
- Do not offer a switch for it. A reader who wants no motion has already said so, and the transition stops.