Update view-transitions.mdx (#10951)

alexgagnon · sarah11918 · web-flow · commit ef9179ab33af · 2025-02-23T21:09:41.000-04:00
Co-authored-by: Sarah Rainsberger &lt;5098874+sarah11918@users.noreply.github.com&gt;
diff --git a/src/content/docs/en/guides/view-transitions.mdx b/src/content/docs/en/guides/view-transitions.mdx
@@ -8,7 +8,7 @@ i18nReady: true
 import Since from '~/components/Since.astro'
 import { Steps } from '@astrojs/starlight/components'
 
-Astro supports **opt-in, per-page, view transitions** with just a few lines of code. View transitions update your page content without the browser's normal, full-page navigation refresh and provide seamless animations between pages. 
+Astro supports view transitions with just a few lines of code. View transitions update your page content without the browser’s normal, full-page navigation refresh and provide seamless animations between pages. Where [browser support for the View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API#browser_compatibility) is lacking, Astro allows you to [control fallback strategies](#fallback-control) for the best possible experience for all visitors.  
 
 Astro provides a `<ClientRouter />` routing component that can be added to a single page's `<head>` to control page transitions as you navigate away to another page. It provides a lightweight client-side router that [intercepts navigation](#client-side-navigation-process) and allows you to customize the transition between pages.
 
@@ -23,7 +23,6 @@ Astro's view transitions support is powered by the new [View Transitions](https:
 - [Control over fallback behavior](#fallback-control) for browsers that do not yet support the View Transition APIs.
 - Automatic support for [`prefers-reduced-motion`](#prefers-reduced-motion).
 
-
 :::note
 By default, every page will use regular, full-page, browser navigation. You must opt in to view transitions and can use them either on a per-page basis or site-wide.
 :::
@@ -445,7 +444,16 @@ You can opt out of router transitions on any individual form using the `data-ast
 
 ## Fallback control
 
-The `<ClientRouter />` router works best in browsers that support View Transitions (i.e. Chromium browsers), but also includes default fallback support for other browsers. Even if the browser does not support the View Transitions API, Astro will still provide in-browser navigation using one of the fallback options for a comparable experience.
+The `<ClientRouter />` router works best in browsers that support View Transitions (i.e. Chromium browsers), but also includes default fallback support for other browsers. Even if the browser does not support the View Transitions API, Astro's client router can still provide in-browser navigation using one of the fallback options.
+
+Depending on browser support, you may need to explicitly set the `name` or `animate` [`transition` directives](#transition-directives) on the elements you wish to animate for a comparable experience across all browsers:
+
+```astro title="src/pages/about.astro"
+---
+import Layout from '../layouts/LayoutUsingClientRouter.astro'
+---
+<title transition:animate="fade">About my site</title>
+```
 
 You can override Astro's default fallback support by adding a `fallback` property on the `<ClientRouter />` component and setting it to `swap` or `none`:
 
