What is Astro's View Transitions API integration?

Answer

Astro has built-in support for the browser's View Transitions API, enabling smooth animated page transitions without a single-page app architecture. Add to a layout: import { ViewTransitions } from 'astro:transitions'; <head><ViewTransitions /></head>. This enables: Client-side navigation: Astro intercepts link clicks and fetches the new page content — no full page reload. Animated transitions: elements with matching transition:name animate between pages (shared element transitions). Custom animations: transition:animate="slide", "fade", or custom CSS animations. Persist elements: keep components alive across navigation with transition:persist (e.g., audio players, video). Fallback: gracefully falls back to full page navigation in unsupported browsers. View Transitions give Astro static sites the smooth feel of SPAs while maintaining Astro's zero-JS architecture for non-interactive pages.