fix: CSS View Transitions module, the View Transition API (#37276)

* fix: CSS View Transitions module, the View Transition API

* fix: CSS View Transitions module, the View Transition API

* fix: CSS View Transitions module, the View Transition API

* fix: CSS View Transitions module, the View Transition API

files/en-us/_redirects.txt

@@ -10404,6 +10404,8 @@
 /en-US/docs/Web/API/VideoTrackList/onaddtrack	/en-US/docs/Web/API/VideoTrackList/addtrack_event
 /en-US/docs/Web/API/VideoTrackList/onchange	/en-US/docs/Web/API/VideoTrackList/change_event
 /en-US/docs/Web/API/VideoTrackList/onremovetrack	/en-US/docs/Web/API/VideoTrackList/removetrack_event
+/en-US/docs/Web/API/View_Transitions_API	/en-US/docs/Web/API/View_Transition_API
+/en-US/docs/Web/API/View_Transitions_API/Using	/en-US/docs/Web/API/View_Transition_API/Using
 /en-US/docs/Web/API/VisualViewport/onresize	/en-US/docs/Web/API/VisualViewport/resize_event
 /en-US/docs/Web/API/VisualViewport/onscroll	/en-US/docs/Web/API/VisualViewport/scroll_event
 /en-US/docs/Web/API/WEBGL_compressed_texture_es3	/en-US/docs/Web/API/WEBGL_compressed_texture_etc

files/en-us/web/api/document/index.md

@@ -263,7 +263,7 @@ _This interface also inherits from the {{DOMxRef("Node")}} and {{DOMxRef("EventT
 - {{DOMxRef("Document.requestStorageAccessFor()")}} {{experimental_inline}}
   - : Allows top-level sites to request third-party cookie access on behalf of embedded content originating from another site in the same [related website set](/en-US/docs/Web/API/Storage_Access_API/Related_website_sets).
 - {{domxref("Document.startViewTransition()")}}
-  - : Starts a new {{domxref("View Transitions API", "view transition", "", "nocode")}} and returns a {{domxref("ViewTransition")}} object to represent it.
+  - : Starts a new {{domxref("View Transition API", "view transition", "", "nocode")}} and returns a {{domxref("ViewTransition")}} object to represent it.
 
 The `Document` interface is extended with the {{DOMxRef("XPathEvaluator")}} interface:
 

files/en-us/web/api/document/startviewtransition/index.md

@@ -6,11 +6,11 @@ page-type: web-api-instance-method
 browser-compat: api.Document.startViewTransition
 ---
 
-{{APIRef("View Transitions API")}}
+{{APIRef("View Transition API")}}
 
-The **`startViewTransition()`** method of the {{domxref("Document")}} interface starts a new same-document (SPA) [view transition](/en-US/docs/Web/API/View_Transitions_API) and returns a {{domxref("ViewTransition")}} object to represent it.
+The **`startViewTransition()`** method of the {{domxref("Document")}} interface starts a new same-document (SPA) [view transition](/en-US/docs/Web/API/View_Transition_API) and returns a {{domxref("ViewTransition")}} object to represent it.
 
-When `startViewTransition()` is invoked, a sequence of steps is followed as explained in [The view transition process](/en-US/docs/Web/API/View_Transitions_API/Using#the_view_transition_process).
+When `startViewTransition()` is invoked, a sequence of steps is followed as explained in [The view transition process](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_process).
 
 ## Syntax
 
@@ -32,7 +32,7 @@ A {{domxref("ViewTransition")}} object instance.
 
 ### Basic usage
 
-In our [Basic SPA View Transitions demo](https://mdn.github.io/dom-examples/view-transitions/spa/), the `updateView()` function handles both browsers that do and don't support the View Transitions API. In supporting browsers, we invoke `startViewTransition()` to trigger the view transition process without worrying about the return value.
+In our [Basic SPA View Transitions demo](https://mdn.github.io/dom-examples/view-transitions/spa/), the `updateView()` function handles both browsers that do and don't support the View Transition API. In supporting browsers, we invoke `startViewTransition()` to trigger the view transition process without worrying about the return value.
 
 ```js
 function updateView(event) {
@@ -71,4 +71,4 @@ function updateView(event) {
 
 ## See also
 
-- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/)
+- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/)

files/en-us/web/api/navigationactivation/entry/index.md

@@ -33,4 +33,4 @@ See the main {{domxref("NavigationActivation")}} page.
 ## See also
 
 - [Navigation API](/en-US/docs/Web/API/Navigation_API)
-- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API)
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)

files/en-us/web/api/navigationactivation/from/index.md

@@ -34,4 +34,4 @@ See the main {{domxref("NavigationActivation")}} page.
 ## See also
 
 - [Navigation API](/en-US/docs/Web/API/Navigation_API)
-- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API)
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)

files/en-us/web/api/navigationactivation/index.md

@@ -92,4 +92,4 @@ window.addEventListener("pagereveal", async (e) => {
 ## See also
 
 - [Navigation API](/en-US/docs/Web/API/Navigation_API)
-- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API)
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)

files/en-us/web/api/navigationactivation/navigationtype/index.md

@@ -46,4 +46,4 @@ window.addEventListener("pageswap", (event) => {
 ## See also
 
 - [Navigation API](/en-US/docs/Web/API/Navigation_API)
-- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API)
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)

files/en-us/web/api/pagerevealevent/index.md

@@ -9,7 +9,7 @@ browser-compat: api.PageRevealEvent
 
 The **`PageRevealEvent`** event object is made available inside handler functions for the {{domxref("Window.pagereveal_event", "pagereveal")}} event.
 
-During a cross-document navigation, it allows you to manipulate a related [view transition](/en-US/docs/Web/API/View_Transitions_API) (providing access to the relevant {{domxref("ViewTransition")}} object) from the document being navigated _to_, if a view transition was triggered by the navigation.
+During a cross-document navigation, it allows you to manipulate a related [view transition](/en-US/docs/Web/API/View_Transition_API) (providing access to the relevant {{domxref("ViewTransition")}} object) from the document being navigated _to_, if a view transition was triggered by the navigation.
 
 Outside view transitions, this event is also useful for cases such as triggering a startup animation, or reporting a page view. It's equivalent to the first {{domxref("Window.requestAnimationFrame()")}} run after a cross-document navigation, if you were to trigger `requestAnimationFrame()` in the {{htmlelement("head")}} of the document. For example, if you ran the following `reveal()` function in the `<head>`:
 
@@ -100,4 +100,4 @@ window.addEventListener("pagereveal", async (e) => {
 
 ## See also
 
-- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API)
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)

files/en-us/web/api/pagerevealevent/pagerevealevent/index.md

@@ -40,4 +40,4 @@ A developer would not use this constructor manually. A new `PageRevealEvent` obj
 
 ## See also
 
-- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API)
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)

files/en-us/web/api/pagerevealevent/viewtransition/index.md

@@ -29,4 +29,4 @@ See the main {{domxref("PageRevealEvent")}} page.
 ## See also
 
 - [Navigation API](/en-US/docs/Web/API/Navigation_API)
-- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API)
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)

files/en-us/web/api/pageswapevent/activation/index.md

@@ -28,4 +28,4 @@ See the main {{domxref("PageSwapEvent")}} page.
 
 ## See also
 
-- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API)
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)

files/en-us/web/api/pageswapevent/index.md

@@ -9,7 +9,7 @@ browser-compat: api.PageSwapEvent
 
 The **`PageSwapEvent`** event object is made available inside handler functions for the {{domxref("Window.pageswap_event", "pageswap")}} event.
 
-The `pageswap` event is fired when you navigate across documents, when the previous document is about to unload. During a cross-document navigation, the `PageSwapEvent` event object allows you to manipulate the related [view transition](/en-US/docs/Web/API/View_Transitions_API) (providing access to the relevant {{domxref("ViewTransition")}} object) from the document being navigated _from_, if a view transition was triggered by the navigation. It also provides access to information on the navigation type and current and destination documents.
+The `pageswap` event is fired when you navigate across documents, when the previous document is about to unload. During a cross-document navigation, the `PageSwapEvent` event object allows you to manipulate the related [view transition](/en-US/docs/Web/API/View_Transition_API) (providing access to the relevant {{domxref("ViewTransition")}} object) from the document being navigated _from_, if a view transition was triggered by the navigation. It also provides access to information on the navigation type and current and destination documents.
 
 ## Constructor
 
@@ -88,4 +88,4 @@ window.addEventListener("pageswap", async (e) => {
 
 ## See also
 
-- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API)
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)

files/en-us/web/api/pageswapevent/pageswapevent/index.md

@@ -42,4 +42,4 @@ A developer would not use this constructor manually. A new `PageSwapEvent` objec
 
 ## See also
 
-- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API)
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)

files/en-us/web/api/pageswapevent/viewtransition/index.md

@@ -28,4 +28,4 @@ See the main {{domxref("PageSwapEvent")}} page.
 
 ## See also
 
-- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API)
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)

files/en-us/web/api/view_transitions_api/index.md → files/en-us/web/api/view_transition_api/index.md

@@ -1,16 +1,16 @@
 ---
-title: View Transitions API
-slug: Web/API/View_Transitions_API
+title: View Transition API
+slug: Web/API/View_Transition_API
 page-type: web-api-overview
 browser-compat:
   - api.Document.startViewTransition
   - css.at-rules.view-transition
 spec-urls: https://drafts.csswg.org/css-view-transitions/
 ---
 
-{{DefaultAPISidebar("View Transitions API")}}
+{{DefaultAPISidebar("View Transition API")}}
 
-The **View Transitions API** provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).
+The **View Transition API** provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).
 
 ## Concepts and usage
 
@@ -26,11 +26,11 @@ However, creating view transitions on the web has historically been difficult:
     Accessibility issues like loss of reading position, focus confusion, and strange live region announcement behavior can also result from having the new and old content both present in the DOM at once.
 - Cross-document view transitions (i.e. across navigations between different pages in MPAs) have historically been impossible.
 
-The View Transitions API provides an easy way of handling the required view changes and transition animations for both the above use cases.
+The View Transition API provides an easy way of handling the required view changes and transition animations for both the above use cases.
 
 Creating a view transition that uses the browser's default transition animations is very quick to do, and there are features that allow you to both customize the transition animation and manipulate the view transition itself (for example specify circumstances under which the animation is skipped), for both SPA and MPA view transitions.
 
-See [Using the View Transitions API](/en-US/docs/Web/API/View_Transitions_API/Using) for more information.
+See [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Using) for more information.
 
 ## Interfaces
 
@@ -84,7 +84,7 @@ See [Using the View Transitions API](/en-US/docs/Web/API/View_Transitions_API/Us
 
 - [Basic View Transitions SPA demo](https://mdn.github.io/dom-examples/view-transitions/spa/): A basic image gallery demo with view transitions, featuring separate animations between old and new images, and old and new captions.
 - [Basic View Transitions MPA demo](https://mdn.github.io/dom-examples/view-transitions/mpa/): A sample two-page site that demonstrates usage of cross-document (MPA) view transitions, providing a custom "swipe up" transition when the two pages are navigated between.
-- [HTTP 203 playlist](https://http203-playlist.netlify.app/): A video player demo app that features several different SPA view transitions, many of which are explained in [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/).
+- [HTTP 203 playlist](https://http203-playlist.netlify.app/): A video player demo app that features several different SPA view transitions, many of which are explained in [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/).
 - [List of Chrome DevRel team members](https://view-transitions.chrome.dev/profiles/mpa/): A basic team profile pages app that demonstrates how to use the {{domxref("Window.pagereveal_event", "pagereveal")}} and {{domxref("Window.pageswap_event", "pageswap")}} events to customize the outgoing and inbound animations of a cross-document view transition based on the "from" and "to" URLs.
 
 ## Specifications
@@ -97,5 +97,5 @@ See [Using the View Transitions API](/en-US/docs/Web/API/View_Transitions_API/Us
 
 ## See also
 
-- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/)
-- [View Transitions API: Creating Smooth Page Transitions](https://stackdiary.com/view-transitions-api/)
+- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/)
+- [View Transition API: Creating Smooth Page Transitions](https://stackdiary.com/view-transitions-api/)

files/en-us/web/api/view_transitions_api/using/index.md → files/en-us/web/api/view_transition_api/using/index.md

@@ -1,14 +1,14 @@
 ---
-title: Using the View Transitions API
-slug: Web/API/View_Transitions_API/Using
+title: Using the View Transition API
+slug: Web/API/View_Transition_API/Using
 page-type: guide
 status:
   - experimental
 ---
 
-{{DefaultAPISidebar("View Transitions API")}}
+{{DefaultAPISidebar("View Transition API")}}
 
-This article explains the theory behind how the [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) works, how to create view transitions and customize the transition animations, and how to manipulate active view transitions. This covers view transitions for both DOM state updates in a single-page app (SPA), and navigating between documents in a multi-page app (MPA).
+This article explains the theory behind how the [View Transition API](/en-US/docs/Web/API/View_Transition_API)) works, how to create view transitions and customize the transition animations, and how to manipulate active view transitions. This covers view transitions for both DOM state updates in a single-page app (SPA), and navigating between documents in a multi-page app (MPA).
 
 ## The view transition process
 
@@ -125,7 +125,7 @@ Our [View Transitions MPA demo](https://mdn.github.io/dom-examples/view-transiti
 
 ## Customizing your animations
 
-The View Transitions pseudo-elements have default [CSS Animations](/en-US/docs/Web/CSS/CSS_animations) applied (which are detailed in their [reference pages](/en-US/docs/Web/API/View_Transitions_API#pseudo-elements)).
+The View Transitions pseudo-elements have default [CSS Animations](/en-US/docs/Web/CSS/CSS_animations) applied (which are detailed in their [reference pages](/en-US/docs/Web/API/View_Transition_API#pseudo-elements)).
 
 Most appearance transitions are given a default smooth cross-fade animation, as mentioned above. There are some exceptions:
 
@@ -287,7 +287,7 @@ figcaption {
 
 This works because, by default, `::view-transition-group` transitions `width` and `height` between the old and new views with a smooth scale. We just needed to set a fixed `height` on both states to make it work.
 
-> **Note:** [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) contains several other customization examples.
+> **Note:** [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) contains several other customization examples.
 
 ## Controlling view transitions with JavaScript
 

files/en-us/web/api/viewtransition/finished/index.md

@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.ViewTransition.finished
 ---
 
-{{APIRef("View Transitions API")}}
+{{APIRef("View Transition API")}}
 
 The **`finished`** read-only property of the
 {{domxref("ViewTransition")}} interface is a {{jsxref("Promise")}} that fulfills once the transition animation is finished, and the new page view is visible and interactive to the user.
@@ -55,4 +55,4 @@ async function handleTransition() {
 
 ## See also
 
-- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/)
+- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/)

files/en-us/web/api/viewtransition/index.md

@@ -5,9 +5,9 @@ page-type: web-api-interface
 browser-compat: api.ViewTransition
 ---
 
-{{APIRef("View Transitions API")}}
+{{APIRef("View Transition API")}}
 
-The **`ViewTransition`** interface of the {{domxref("View Transitions API", "View Transitions API", "", "nocode")}} represents an active view transition, and provides functionality to react to the transition reaching different states (e.g. ready to run the animation, or animation finished) or skip the transition altogether.
+The **`ViewTransition`** interface of the {{domxref("View Transition API", "View Transition API", "", "nocode")}} represents an active view transition, and provides functionality to react to the transition reaching different states (e.g. ready to run the animation, or animation finished) or skip the transition altogether.
 
 This object type is made available in the following ways:
 
@@ -16,7 +16,7 @@ This object type is made available in the following ways:
   - In the outgoing page via the {{domxref("Window.pageswap_event", "pageswap")}} event object's {{domxref("PageSwapEvent.viewTransition")}} property.
   - In the inbound page via the {{domxref("Window.pagereveal_event", "pagereveal")}} event object's {{domxref("PageRevealEvent.viewTransition")}} property.
 
-When a view transition is triggered by a `startViewTransition()` call (or a page navigation in the case of MPA transitions), a sequence of steps is followed as explained in [The view transition process](/en-US/docs/Web/API/View_Transitions_API/Using#the_view_transition_process). This also explains when the different promises fulfill.
+When a view transition is triggered by a `startViewTransition()` call (or a page navigation in the case of MPA transitions), a sequence of steps is followed as explained in [The view transition process](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_process). This also explains when the different promises fulfill.
 
 ## Instance properties
 
@@ -108,4 +108,4 @@ This animation also requires the following CSS, to turn off the default CSS anim
 
 ## See also
 
-- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/)
+- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/)

files/en-us/web/api/viewtransition/ready/index.md

@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.ViewTransition.ready
 ---
 
-{{APIRef("View Transitions API")}}
+{{APIRef("View Transition API")}}
 
 The **`ready`** read-only property of the
 {{domxref("ViewTransition")}} interface is a {{jsxref("Promise")}} that fulfills once the pseudo-element tree is created and the transition animation is about to start.
@@ -93,4 +93,4 @@ This animation also requires the following CSS, to turn off the default CSS anim
 
 ## See also
 
-- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/)
+- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/)