To add a basic transition between pages on a multi-page website, put @view-transition { navigation: auto; } in the CSS used by both the page being left and the page being opened. The browser can then animate an eligible same-origin navigation; you do not need JavaScript just to start it.
Set up the transition on both pages
Add this rule to a stylesheet loaded by each participating document:
@view-transition {
navigation: auto;
}The rule opts each document into browser-managed cross-document transitions. It does not force every navigation to animate: the pages must be same-origin and the navigation must qualify. For a basic multi-page application (MPA), the browser handles the transition as it navigates between separate documents; you do not wrap the navigation in document.startViewTransition().
Check whether a navigation can transition
- Both pages need the opt-in. The outgoing and destination documents must each include the rule.
- The pages must share an origin. Origin is determined by scheme, hostname, and port. Being on the same site is not sufficient if one of those differs. A cross-origin redirect prevents the documented automatic transition.
- The navigation must be eligible. Chrome documents qualifying history traverse and push/replace navigations; address-bar navigation, bookmarks, and reloads are examples that do not qualify. The rule is not a command to animate every way of reaching a URL.
- The browser must support the feature. If a transition is unavailable or skipped, ordinary document navigation still proceeds. Support for the base feature and related customization can vary.
Chrome’s guide also documents implementation-specific limits: its cross-document implementation applies to main-frame navigations, and Chrome skips a transition if navigation takes more than four seconds. These are Chrome details, not universal rules for every browser.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
What the browser animates by default
The browser captures the outgoing view, navigates, captures the incoming view, and animates between the snapshots. By default, the root view cross-fades. The old snapshot is static, while the incoming page is interactive during the animation.
Give selected elements their own transition
To make corresponding elements transition as distinct snapshots rather than relying only on the root cross-fade, assign the same unique view-transition-name to the corresponding element in each page:
/* Use the same unique name on the matching element in both documents. */
.hero {
view-transition-name: hero;
}Use a name only once per page. MDN notes that if multiple elements on a page share a name, the transition is skipped. You can also style view-transition pseudo-elements with CSS animations for more control over the effect.
How this differs from an SPA transition
An MPA transition accompanies navigation between separate documents and is enabled with CSS on both documents. A single-page application (SPA) updates its existing document instead; its transition is typically initiated in JavaScript by calling document.startViewTransition() around the DOM update. Neither approach is universally faster or better: they describe different navigation architectures and initiation methods.
Rank #3
Support and optional customization
MDN marks the @view-transition at-rule as having limited availability, so check current compatibility data for the browsers your visitors use. A Chrome for Developers demo page updated March 25, 2026 lists MPA transition support for Chrome 126+ and Safari 18.2+. That dated, feature-specific listing is not a guarantee that every related API or customization behaves identically in those browsers.
More advanced implementations can use the pageswap and pagereveal events to make last-minute outgoing-page or incoming-page adjustments. Navigation Activation information can support direction- or destination-aware behavior. These hooks are optional; the CSS opt-in is enough for the basic effect.
Quick Recap
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
