View Transitions API

The View Transitions API is a browser API that enables smooth animated transitions between page states or full page navigations without requiring the developer to manage complex CSS or JavaScript animation choreography. For single-page applications, the API (available in Chrome from version 111, released March 2023) allows document.startViewTransition() to wrap DOM mutations, automatically capturing a screenshot of the before state and animating to the after state with a cross-fade by default. Transitions are fully customisable via CSS. For multi-page applications, the API’s cross-document mode — shipping in Chrome 126 in June 2024 and driven by an @view-transition { navigation: auto } CSS rule — enables animated page transitions across full navigations without JavaScript, making it compatible with traditional server-rendered sites and static site generators including Astro. From an SEO perspective, smooth transitions can reduce perceived load time and improve engagement metrics. Combining View Transitions with Speculation Rules prerendering allows multi-page sites to deliver instant, visually polished navigations comparable to native mobile apps.