Catalog · Site-wide
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.
Fits best: any site — a site where visitors move from page to page and you want the change to feel softer
Example
This site uses it. Follow a link to another page: the page you leave fades out while the next fades in, in 0.2 seconds.
Open the announcement page or the search page, then come back with the Back button.
Nothing happens if your reader asked for reduced motion, in Firefox, or on the first load of a page.
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.
Code
Copy the markup
import "@luz-ds/catalog/components/page-transition.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-transition.min.css" integrity="sha384-GsqR+xHLk9aIrM1VSOFUNPawklWIz22hiY8HI7pyriRycpgyDLTu5SOO2Fh9rPYW" crossorigin="anonymous">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.
<a href="/docs/">Documentation</a>Variants and options
There are none: one fixed transition, with no setting and no control.
| Rule | Effect |
|---|---|
@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-transitionrule 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.
Contrast and focus are in the Design tab.
Design
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.
Do and don't
Writing the content
It has no text. Describe a page change in your own words as you always did: a link says where it goes, and the title of the new page says where you are.
Contrast and focus
It paints no colour of its own, so there is no pair to measure. The pictures it fades are the pages themselves, each in the reader’s mode.
- Focus: the 2 px
--luz-focus-ringoutline of the page is part of the picture and fades with it. - In forced colours and on paper it changes nothing.
Tokens it uses
The 2 tokens that the rules of catalog’s components/page-transition.css read, by family. Each family links to its page, with the values in every mode. In Figma they are variables with the same names: see Tokens in Figma.
- Motion
--luz-duration-base,--luz-easing-standard
Keyboard and ARIA are in the Code tab.