diff --git a/files/zh-cn/web/api/document/startviewtransition/index.md b/files/zh-cn/web/api/document/startviewtransition/index.md
new file mode 100644
index 00000000000000..c3b3db261f27e4
--- /dev/null
+++ b/files/zh-cn/web/api/document/startviewtransition/index.md
@@ -0,0 +1,71 @@
+---
+title: Document：startViewTransition() 方法
+short-title: startViewTransition()
+slug: Web/API/Document/startViewTransition
+---
+
+{{APIRef("Document")}}{{SeeCompatTable}}
+
+{{domxref("View Transitions API", "View Transitions API", "", "nocode")}} 的 **`startViewTransition()`** 方法开始一个新的视图过渡，并返回一个 {{domxref("ViewTransition")}} 对象来表示它。
+
+当调用 `startViewTransition()` 时，将按照[视图过渡过程](/zh-CN/docs/Web/API/View_Transitions_API#视图过渡过程)中所述的步骤序列进行。
+
+## 语法
+
+```js-nolint
+startViewTransition(callback)
+```
+
+### 参数
+
+- `callback`
+  - : 一个在视图过渡过程中通常用于更新 DOM 的回调函数，它返回一个 {{jsxref("Promise")}}。这个回调函数在 API 截取了当前页面的屏幕截图后被调用。当回调函数返回的 Promise 兑现时，视图过渡将在下一帧开始。如果回调函数返回的 Promise 拒绝，过渡将被放弃。
+
+### 返回值
+
+一个 {{domxref("ViewTransition")}} 对象实例。
+
+## 示例
+
+### 基本用法
+
+在[基础视图过渡演示](https://mdn.github.io/dom-examples/view-transitions/)中，`updateView()` 函数处理支持和不支持 View Transitions API 的浏览器。在支持的浏览器中，我们调用 `startViewTransition()` 来启动视图过渡，而不关心返回值。
+
+```js
+function updateView(event) {
+  // 处理在 <a> 或 <img> 上触发事件的差异
+  let targetIdentifier;
+  if (event.target.firstChild === null) {
+    targetIdentifier = event.target;
+  } else {
+    targetIdentifier = event.target.firstChild;
+  }
+
+  const displayNewImage = () => {
+    const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
+    galleryImg.src = mainSrc;
+    galleryCaption.textContent = targetIdentifier.alt;
+  };
+
+  // 浏览器不支持 View Transitions 时的回退方案：
+  if (!document.startViewTransition) {
+    displayNewImage();
+    return;
+  }
+
+  // 开始一次视图过渡：
+  const transition = document.startViewTransition(() => displayNewImage());
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/api/view_transitions_api/index.md b/files/zh-cn/web/api/view_transitions_api/index.md
new file mode 100644
index 00000000000000..710c2e61365407
--- /dev/null
+++ b/files/zh-cn/web/api/view_transitions_api/index.md
@@ -0,0 +1,305 @@
+---
+title: View Transitions API
+slug: Web/API/View_Transitions_API
+---
+
+{{SeeCompatTable}}{{DefaultAPISidebar("View Transitions API")}}
+
+**View Transitions API** 提供了一种机制，可以在更新 DOM 内容的同时，轻松地创建不同 DOM 状态之间的动画过渡。同时还可以在单个步骤中更新 DOM 内容。
+
+## 概念和用法
+
+视图过渡是一种流行的设计选择，可以减少用户认知负荷，帮助他们保持上下文，并减少他们在应用程序的状态或视图之间移动时感知的加载延迟。
+
+但是，在 Web 上创建视图过渡历来很困难。在单页应用程序（SPA）中，状态之间的过渡往往需要编写大量的 CSS 和 JavaScript 来：
+
+- 处理新旧内容的加载和定位。
+- 为新旧状态添加动画以创建过渡。
+- 防止用户与旧内容的意外交互而导致的问题。
+- 完成过渡后删除旧内容。
+
+像阅读位置丢失、焦点混乱和实时区域宣告的奇怪行为等无障碍问题，也可能由于新旧内容同时存在于 DOM 中而导致。此外，跨文档视图过渡（即在常规非 SPA 网站中跨越不同页面）是不可能的。
+
+View Transitions API 提供了一种更简单的方法来处理必需的 DOM 更改和过渡动画。
+
+> **备注：** View Transitions API 目前不支持跨文档视图过渡，但这已计划在未来的规范版本中实现，并正在积极开发中。
+
+### 创建基本视图过渡
+
+例如，一个 SPA 应用可能包含获取新内容和响应某种事件并更新 DOM 的功能，例如点击导航链接或从服务器推送更新。在我们的[基础视图过渡演示](https://mdn.github.io/dom-examples/view-transitions/)中，我们将其简化为一个 `displayNewImage()` 函数，该函数根据点击的缩略图显示新的全尺寸图像。我们将其封装在 `updateView()` 函数中，该函数仅在浏览器支持时才调用 View Transitions API：
+
+```js
+function updateView(event) {
+  // 处理在 <a> 或 <img> 上触发事件的差异
+  const targetIdentifier = event.target.firstChild || event.target;
+
+  const displayNewImage = () => {
+    const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
+    galleryImg.src = mainSrc;
+    galleryCaption.textContent = targetIdentifier.alt;
+  };
+
+  // 浏览器不支持 View Transitions 时的回退方案：
+  if (!document.startViewTransition) {
+    displayNewImage();
+    return;
+  }
+
+  // 开始一次视图过渡：
+  const transition = document.startViewTransition(() => displayNewImage());
+}
+```
+
+这段代码足以处理显示的图像之间的过渡。支持的浏览器将以平滑的交叉淡入淡出（默认的视图过渡）显示新旧图像和标题的变化。它仍可以在不支持的浏览器中工作，但没有漂亮的动画效果。
+
+值得一提的是，`startViewTransition()` 返回一个 {{domxref("ViewTransition")}} 实例，该实例包含了多个 Promise, 允许你在到达视图过渡过程的不同阶段时运行代码。
+
+### 视图过渡过程
+
+让我们来看看这是如何工作的：
+
+1. 当调用 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 时，API 会截取当前页面的屏幕截图。
+2. 接下来，调用传递给 `startViewTransition()` 的回调函数，即 `displayNewImage`，这会导致 DOM 发生更改。
+
+   当回调函数成功运行时，{{domxref("ViewTransition.updateCallbackDone")}} Promise 兑现，允许你响应 DOM 更新。
+
+3. API 会捕获页面的新状态并实时展示。
+4. API 构造了一个具有以下结构的伪元素树：
+
+   ```plain
+   ::view-transition
+   └─ ::view-transition-group(root)
+      └─ ::view-transition-image-pair(root)
+         ├─ ::view-transition-old(root)
+         └─ ::view-transition-new(root)
+   ```
+
+   - {{cssxref("::view-transition")}} 是视图过渡叠加层的根元素，它包含所有视图过渡且位于所有其他页面内容的顶部。
+   - {{cssxref("::view-transition-old")}} 是旧页面视图的屏幕截图，且 {{cssxref("::view-transition-new")}} 是新页面视图的实时展示。这两者都呈现为替换内容，就像 {{htmlelement("img")}} 或 {{htmlelement("video")}} 那样，这意味着它们可以方便的使用属性进行样式设置，例如 {{cssxref("object-fit")}} 和 {{cssxref("object-position")}}。
+
+   当过渡动画即将运行时，{{domxref("ViewTransition.ready")}} Promise 兑现，你可以响应它进行一些操作，例如运行自定义的 JavaScript 动画，而不是默认的动画。
+
+5. 旧页面视图的 {{cssxref("opacity")}} 从 1 过渡到 0，而新视图从 0 过渡到 1，这就是默认的交叉淡入淡出效果。
+6. 当过渡动画结束时，{{domxref("ViewTransition.finished")}} Promise 兑现，你可以响应它进行一些操作。
+
+### 为不同的元素使用不同的过渡效果
+
+目前，当 DOM 更新时发生变化的不同元素都使用相同的过渡动画。如果你想让不同的元素以不同于默认的“root”动画的方式进行过渡，你可以使用 {{cssxref("view-transition-name")}} 属性将它们分开。例如：
+
+```css
+figcaption {
+  view-transition-name: figure-caption;
+}
+```
+
+我们给 {{htmlelement("figcaption")}} 元素设置了值为 `figure-caption` 的 `view-transition-name`，以将其与页面上的其余部分分开，便于在视图过渡时进行分离。
+
+应用此 CSS 后，伪元素树现在如下所示：
+
+```plain
+::view-transition
+├─ ::view-transition-group(root)
+│ └─ ::view-transition-image-pair(root)
+│     ├─ ::view-transition-old(root)
+│     └─ ::view-transition-new(root)
+└─ ::view-transition-group(figure-caption)
+  └─ ::view-transition-image-pair(figure-caption)
+      ├─ ::view-transition-old(figure-caption)
+      └─ ::view-transition-new(figure-caption)
+```
+
+第二组伪元素的存在允许将单独的视图过渡样式仅应用于 `<figcaption>`。不同的新旧页面视图之间捕获和处理是完全独立的。
+
+`view-transition-name` 的值可以是除 `none` 之外的任何值——`none` 值表示该元素不参与视图过渡。
+
+> **备注：** `view-transition-name` 必须是唯一的。如果两个渲染元素同时具有相同的 `view-transition-name`，{{domxref("ViewTransition.ready")}} 将拒绝并跳过过渡。
+
+### 自定义动画
+
+视图过渡伪元素具有默认的 [CSS 动画](/zh-CN/docs/Web/CSS/CSS_animations)（在其[参考页面](#css_扩展)中详细介绍）。
+
+值得注意的是，`height`、`width`、`position` 和 `transform` 的过渡不使用平滑的淡入淡出动画。相反，高度和宽度过渡使用平滑的缩放动画。同时，位置和变换过渡将使用平滑的移动动画。
+
+你可以使用常规 CSS 以任何你想要的方式修改默认动画。
+
+例如，你要调整动画速度：
+
+```css
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 0.5s;
+}
+```
+
+让我们看些更有趣的东西——`<figcaption>` 的自定义动画：
+
+```css
+@keyframes grow-x {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes shrink-x {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+::view-transition-old(figure-caption),
+::view-transition-new(figure-caption) {
+  height: auto;
+  right: 0;
+  left: auto;
+  transform-origin: right center;
+}
+
+::view-transition-old(figure-caption) {
+  animation: 0.25s linear both shrink-x;
+}
+
+::view-transition-new(figure-caption) {
+  animation: 0.25s 0.25s linear both grow-x;
+}
+```
+
+在这里，我们创建了一个自定义 CSS 动画并将其应用到 `::view-transition-old(figure-caption)` 和 `::view-transition-new(figure-caption)` 伪元素上。我们还为两者添加了许多其他样式，以使它们保持在同一位置，并防止默认样式干扰我们的自定义动画。
+
+请注意，我们还发现了另一种比上面更简单且产生更好结果的过渡选项。我们最终的 `<figcaption>` 视图过渡看起来像这样：
+
+```css
+figcaption {
+  view-transition-name: figure-caption;
+}
+
+::view-transition-old(figure-caption),
+::view-transition-new(figure-caption) {
+  height: 100%;
+}
+```
+
+这是有效的，因为默认情况下，`::view-transition-group` 在新旧视图之间过渡高度和宽度。我们只需要在两个状态上设置固定的高度，就可以使其正常工作。
+
+> **备注：** [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)包含了其他几个自定义示例。
+
+### 使用 JavaScript 控制动画
+
+{{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 方法返回一个 {{domxref("ViewTransition")}} 对象实例，实例中包含多个 Promise 成员，允许你在到达不同状态的过渡时运行 JavaScript。例如，{{domxref("ViewTransition.ready")}} 在伪元素树创建并且动画即将开始时兑现，而 {{domxref("ViewTransition.finished")}} 在动画结束后兑现，此时新页面视图对用户可见且可交互。
+
+例如，下面的 JavaScript 可以用于创建从用户单击位置开始的圆形揭示视图过渡，动画由 {{domxref("Web Animations API", "Web Animations API", "", "nocode")}} 提供。
+
+```js
+// 保存最后一次点击事件
+let lastClick;
+addEventListener("click", (event) => (lastClick = event));
+
+function spaNavigate(data) {
+  // 为不支持此 API 的浏览器提供回退方案：
+  if (!document.startViewTransition) {
+    updateTheDOMSomehow(data);
+    return;
+  }
+
+  // 获取点击位置，或者回退到屏幕中间
+  const x = lastClick?.clientX ?? innerWidth / 2;
+  const y = lastClick?.clientY ?? innerHeight / 2;
+  // 获取到最远角的距离
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  );
+
+  // 开始一次视图过渡：
+  const transition = document.startViewTransition(() => {
+    updateTheDOMSomehow(data);
+  });
+
+  // 等待伪元素创建完成：
+  transition.ready.then(() => {
+    // 新视图的根元素动画
+    document.documentElement.animate(
+      {
+        clipPath: [
+          `circle(0 at ${x}px ${y}px)`,
+          `circle(${endRadius}px at ${x}px ${y}px)`,
+        ],
+      },
+      {
+        duration: 500,
+        easing: "ease-in",
+        // 指定要附加动画的伪元素
+        pseudoElement: "::view-transition-new(root)",
+      },
+    );
+  });
+}
+```
+
+该动画还需要以下 CSS，以关闭默认的 CSS 动画并防止新旧视图状态以任何方式混合（新状态从旧状态上方“擦除”，而不是过渡）：
+
+```css
+::view-transition-image-pair(root) {
+  isolation: auto;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+  display: block;
+}
+```
+
+## 接口
+
+- {{domxref("ViewTransition")}}
+  - : 表示视图过渡，并提供了在过渡到达不同状态时运行代码的功能（例如，准备运行动画或动画完成），或跳过视图过渡。
+
+## 其他接口扩展
+
+- {{domxref("Document.startViewTransition()")}}
+  - : 开始新的视图过渡并返回一个 {{domxref("ViewTransition")}} 对象来表示它。
+
+## CSS 扩展
+
+### 属性
+
+- {{cssxref("view-transition-name")}}
+  - : 为选定的元素提供单独的标识名称，并使其参与与根视图过渡不同的单独视图过渡——或者如果指定了 `none` 值，则不参与视图过渡。
+
+### 伪元素
+
+- {{cssxref("::view-transition")}}
+  - : 视图过渡叠加层的根元素，它包含所有视图过渡且位于所有其他页面内容的顶部。
+- {{cssxref("::view-transition-group", "::view-transition-group()")}}
+  - : 单个视图过渡的根元素。
+- {{cssxref("::view-transition-image-pair", "::view-transition-image-pair()")}}
+  - : 视图过渡的旧视图和新视图的容器——过渡前和过渡后。
+- {{cssxref("::view-transition-old", "::view-transition-old()")}}
+  - : 转换前的旧视图的静态屏幕截图。
+- {{cssxref("::view-transition-new", "::view-transition-new()")}}
+  - : 转换后的新视图的实时表示。
+
+## 示例
+
+- [基础视图过渡演示](https://mdn.github.io/dom-examples/view-transitions/)：一个基本的图像库演示，其中包含新旧图像之间的单独过渡，以及新旧标题之间的单独过渡。
+- [HTTP 203 播放列表](https://http203-playlist.netlify.app/)：一个更复杂的视频播放器演示应用程序，包含了许多不同的视图过渡，在[使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)中解释了其中的很多视图过渡。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
+- [View Transitions API：创建平滑的页面过渡](https://stackdiary.com/view-transitions-api/)
diff --git a/files/zh-cn/web/api/viewtransition/finished/index.md b/files/zh-cn/web/api/viewtransition/finished/index.md
new file mode 100644
index 00000000000000..2b18bb99966331
--- /dev/null
+++ b/files/zh-cn/web/api/viewtransition/finished/index.md
@@ -0,0 +1,55 @@
+---
+title: ViewTransition：finished 属性
+short-title: finished
+slug: Web/API/ViewTransition/finished
+---
+
+{{APIRef("View Transitions API")}}{{SeeCompatTable}}
+
+{{domxref("ViewTransition")}} 接口的 **`finished`** 只读属性是一个 {{jsxref("Promise")}}。会在过渡动画完成（新的页面视图对用户可见且可交互）时兑现。
+
+仅当传递给 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 的回调函数抛出异常或返回的 Promise 被拒绝时，`finished` 才会被拒绝，这表示页面的新状态未被创建。
+
+如果过渡动画无法开始，或在动画期间使用 {{domxref("ViewTransition.skipTransition()")}} 跳过了过渡动画，那么视图过渡依旧可以到达最终状态，因此 `finished` 依旧会被兑现。
+
+## 值
+
+一个 promise。
+
+## 示例
+
+### 不同的导航使用不同的过渡效果
+
+有时，某些导航需要特定的过渡效果，例如后退导航可能与前进导航的过渡效果不同。处理这种情况的最佳实践是在 `<html>` 元素上设置一个类名以处理过渡（使用特定的选择器应用正确的动画），然后在过渡结束后删除该类名。
+
+```js
+async function handleTransition() {
+  if (isBackNavigation) {
+    document.documentElement.classList.add("back-transition");
+  }
+
+  const transition = document.startViewTransition(() =>
+    updateTheDOMSomehow(data),
+  );
+
+  try {
+    await transition.finished;
+  } finally {
+    document.documentElement.classList.remove("back-transition");
+  }
+}
+```
+
+> **备注：** `isBackNavigation` 不是内置特性；它是一个理论上存在的函数，可以使用 [Navigation API](/zh-CN/docs/Web/API/Navigation_API) 或类似的特性实现。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/api/viewtransition/index.md b/files/zh-cn/web/api/viewtransition/index.md
new file mode 100644
index 00000000000000..9b621ecccda8c7
--- /dev/null
+++ b/files/zh-cn/web/api/viewtransition/index.md
@@ -0,0 +1,104 @@
+---
+title: ViewTransition
+slug: Web/API/ViewTransition
+---
+
+{{APIRef("View Transitions API")}}{{SeeCompatTable}}
+
+{{domxref("View Transitions API", "View Transitions API", "", "nocode")}} 的 **`ViewTransition`** 接口表示视图过渡，并提供了在过渡到达不同状态时运行代码的功能（例如，准备运行动画，或动画完成），或跳过视图过渡。
+
+此对象类型由 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 方法返回。当调用 `startViewTransition()` 时，将按照[视图过渡过程](/zh-CN/docs/Web/API/View_Transitions_API#视图过渡过程)中所述的步骤序列进行。这也解释了不同的 Promise 何时兑现。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+- {{domxref("ViewTransition.finished")}} {{Experimental_Inline}}
+  - : 一个在过渡动画完成后兑现的 {{jsxref("Promise")}}，新的页面视图对用户可见且可交互。
+- {{domxref("ViewTransition.ready")}} {{Experimental_Inline}}
+  - : 一个在伪元素树创建且过渡动画即将开始时兑现的 {{jsxref("Promise")}}。
+- {{domxref("ViewTransition.updateCallbackDone")}} {{Experimental_Inline}}
+  - : 当 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 的回调返回的 {{jsxref("Promise")}} 兑现时，该 {{jsxref("Promise")}} 也会兑现。
+
+## 实例方法
+
+- {{domxref("ViewTransition.skipTransition", "skipTransition()")}} {{Experimental_Inline}}
+  - : 跳过视图过渡的动画部分，但不会跳过运行 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 的回调，该回调会更新 DOM。
+
+## 示例
+
+在下面的示例中，{{domxref("ViewTransition.ready")}} 用于触发从用户点击位置开始的自定义圆形揭示视图过渡，动画由 {{domxref("Web Animations API", "Web Animations API", "", "nocode")}} 提供。
+
+```js
+// 保存最后一次点击事件
+let lastClick;
+addEventListener("click", (event) => (lastClick = event));
+
+function spaNavigate(data) {
+  // 为不支持此 API 的浏览器提供回退方案：
+  if (!document.startViewTransition) {
+    updateTheDOMSomehow(data);
+    return;
+  }
+
+  // 获取点击位置，或者回退到屏幕中间
+  const x = lastClick?.clientX ?? innerWidth / 2;
+  const y = lastClick?.clientY ?? innerHeight / 2;
+  // 获取到最远角的距离
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  );
+
+  // 开始一次视图过渡：
+  const transition = document.startViewTransition(() => {
+    updateTheDOMSomehow(data);
+  });
+
+  // 等待伪元素创建完成：
+  transition.ready.then(() => {
+    // 新视图的根元素动画
+    document.documentElement.animate(
+      {
+        clipPath: [
+          `circle(0 at ${x}px ${y}px)`,
+          `circle(${endRadius}px at ${x}px ${y}px)`,
+        ],
+      },
+      {
+        duration: 500,
+        easing: "ease-in",
+        // 指定要附加动画的伪元素
+        pseudoElement: "::view-transition-new(root)",
+      },
+    );
+  });
+}
+```
+
+该动画还需要以下 CSS，以关闭默认的 CSS 动画并防止新旧视图状态以任何方式混合（新状态从旧状态上方“擦除”，而不是过渡）：
+
+```css
+::view-transition-image-pair(root) {
+  isolation: auto;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+  display: block;
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/api/viewtransition/ready/index.md b/files/zh-cn/web/api/viewtransition/ready/index.md
new file mode 100644
index 00000000000000..3a13d77acc9c73
--- /dev/null
+++ b/files/zh-cn/web/api/viewtransition/ready/index.md
@@ -0,0 +1,93 @@
+---
+title: ViewTransition：ready 属性
+short-title: ready
+slug: Web/API/ViewTransition/ready
+---
+
+{{APIRef("View Transitions API")}}{{SeeCompatTable}}
+
+{{domxref("ViewTransition")}} 接口的 **`ready`** 只读属性是一个 {{jsxref("Promise")}}。会在伪元素树被创建且过渡动画即将开始时兑现。
+
+如果视图过渡无法开始，`ready` 就会被拒绝。这可能是由于错误的配置，例如重复的 {{cssxref("view-transition-name")}}，或者是因为 {{domxref("Document.startViewTransition()")}} 的回调函数抛出异常或返回的 Promise 被拒绝。
+
+## 值
+
+一个 promise。
+
+## 示例
+
+在下面的示例中，`ready` 用于触发从用户点击位置开始的自定义圆形揭示视图过渡，动画由 {{domxref("Web Animations API", "Web Animations API", "", "nocode")}} 提供。
+
+```js
+// 保存最后一次点击事件
+let lastClick;
+addEventListener("click", (event) => (lastClick = event));
+
+function spaNavigate(data) {
+  // 为不支持此 API 的浏览器提供回退方案：
+  if (!document.startViewTransition) {
+    updateTheDOMSomehow(data);
+    return;
+  }
+
+  // 获取点击位置，或者回退到屏幕中间
+  const x = lastClick?.clientX ?? innerWidth / 2;
+  const y = lastClick?.clientY ?? innerHeight / 2;
+  // 获取到最远角的距离
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  );
+
+  // 开始一次视图过渡：
+  const transition = document.startViewTransition(() => {
+    updateTheDOMSomehow(data);
+  });
+
+  // 等待伪元素创建完成：
+  transition.ready.then(() => {
+    // 新视图的根元素动画
+    document.documentElement.animate(
+      {
+        clipPath: [
+          `circle(0 at ${x}px ${y}px)`,
+          `circle(${endRadius}px at ${x}px ${y}px)`,
+        ],
+      },
+      {
+        duration: 500,
+        easing: "ease-in",
+        // 指定要附加动画的伪元素
+        pseudoElement: "::view-transition-new(root)",
+      },
+    );
+  });
+}
+```
+
+该动画还需要以下 CSS，以关闭默认的 CSS 动画并防止新旧视图状态以任何方式混合（新状态从旧状态上方“擦除”，而不是过渡）：
+
+```css
+::view-transition-image-pair(root) {
+  isolation: auto;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+  display: block;
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/api/viewtransition/skiptransition/index.md b/files/zh-cn/web/api/viewtransition/skiptransition/index.md
new file mode 100644
index 00000000000000..030ab3517cba9a
--- /dev/null
+++ b/files/zh-cn/web/api/viewtransition/skiptransition/index.md
@@ -0,0 +1,45 @@
+---
+title: ViewTransition：skipTransition() 方法
+short-title: skipTransition()
+slug: Web/API/ViewTransition/skipTransition
+---
+
+{{APIRef("View Transitions API")}}{{SeeCompatTable}}
+
+{{domxref("ViewTransition")}} 接口的 **`skipTransition()`** 方法跳过视图过渡的动画部分，但不跳过更新 DOM 的 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 回调函数。
+
+## 语法
+
+```js-nolint
+skipTransition()
+```
+
+### 参数
+
+无
+
+### 返回值
+
+`undefined`。
+
+## 示例
+
+```js
+// 开始新的视图过渡
+const transition = document.startViewTransition(() => displayNewImage());
+
+// 跳过视图过渡动画，仅更新 DOM
+transition.skipTransition();
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/api/viewtransition/updatecallbackdone/index.md b/files/zh-cn/web/api/viewtransition/updatecallbackdone/index.md
new file mode 100644
index 00000000000000..a8d63f15b03256
--- /dev/null
+++ b/files/zh-cn/web/api/viewtransition/updatecallbackdone/index.md
@@ -0,0 +1,40 @@
+---
+title: ViewTransition：updateCallbackDone 属性
+short-title: updateCallbackDone
+slug: Web/API/ViewTransition/updateCallbackDone
+---
+
+{{APIRef("View Transitions API")}}{{SeeCompatTable}}
+
+{{domxref("ViewTransition")}} 接口的 **`updateCallbackDone`** 只读属性是一个 {{jsxref("Promise")}}。当传递给 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} 的回调函数返回的 Promise 兑现时，该 Promise 也会兑现，当回调函数返回的 Promise 被拒绝时，该 Promise 也会被拒绝。
+
+当你不关心过渡动画的成功或失败，而只关心 DOM 是否更新以及何时更新时，`updateCallbackDone` 非常有用。
+
+## 值
+
+一个 promise。
+
+## 示例
+
+```js
+// 开始新的视图过渡
+const transition = document.startViewTransition(() => displayNewImage());
+
+transition.updateCallbackDone.then(() => {
+  // 响应 DOM 更新成功
+});
+```
+
+参见[过渡作为增强功能](https://developer.chrome.com/docs/web-platform/view-transitions/#transitions-as-an-enhancement)以获取一个有用的示例。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/css/_doublecolon_view-transition-group/index.md b/files/zh-cn/web/css/_doublecolon_view-transition-group/index.md
new file mode 100644
index 00000000000000..8af5074149380c
--- /dev/null
+++ b/files/zh-cn/web/css/_doublecolon_view-transition-group/index.md
@@ -0,0 +1,71 @@
+---
+title: "::view-transition-group"
+slug: Web/CSS/::view-transition-group
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`::view-transition-group`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)表示单个视图过渡组。
+
+在视图过渡期间，`::view-transition-group` 包含在相关的伪元素树上，如[视图过渡过程](/zh-CN/docs/Web/API/View_Transitions_API#视图过渡过程)中所述。它只能是 {{cssxref("::view-transition")}} 的子节点，并且有一个 {{cssxref("::view-transition-image-pair")}} 子节点。
+
+`::view-transition-group` 在 UA 样式表中具有以下默认样式：
+
+```css
+html::view-transition-group(*) {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  animation-duration: 0.25s;
+  animation-fill-mode: both;
+}
+```
+
+默认情况下，该元素最初会镜像表示 {{cssxref("::view-transition-old")}} 伪元素的大小和位置，即旧视图状态。如果没有旧视图状态，则会镜像表示 {{cssxref("::view-transition-new")}} 伪元素的大小和位置，即新视图状态。
+
+如果同时存在新旧两种视图状态，则视图过渡样式表中的样式会将该伪元素的 {{cssxref("width")}} 和 {{cssxref("height")}} 从旧视图状态的边框盒大小动画到新视图状态的边框盒大小。
+
+> **备注：** 视图过渡样式表中的样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的[设置过渡伪元素](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)和[更新伪元素样式](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)部分。
+
+此外，元素的变换是从旧视图状态的屏幕空间，变换到新视图状态的屏幕空间。由于动画属性的值是在过渡开始时确定的，因此此样式是动态生成的。
+
+## 语法
+
+```css-nolint
+::view-transition-group(<pt-name-selector>) {
+  /* ... */
+}
+```
+
+`<pt-name-selector>` 可以是以下任何值之一：
+
+- `*`
+  - : 使伪元素选择器匹配所有视图过渡组。
+- `root`
+  - : 使伪元素选择器匹配由 UA 创建的默认 `root` 视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过 {{cssxref("view-transition-name")}} 属性分配给特定视图过渡组的元素。
+- {{cssxref("custom-ident")}}
+  - : 使伪元素选择器匹配（通过 {{cssxref("view-transition-name")}} 属性将 {{cssxref("custom-ident")}} 分配给元素而创建的）特定视图转换组。
+
+## 示例
+
+```css
+view-transition-group(embed-container) {
+  animation-duration: 0.3s;
+  animation-timing-function: ease;
+  z-index: 1;
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [View Transitions API](/zh-CN/docs/Web/API/View_Transitions_API)
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/css/_doublecolon_view-transition-image-pair/index.md b/files/zh-cn/web/css/_doublecolon_view-transition-image-pair/index.md
new file mode 100644
index 00000000000000..e7313d59ef46ef
--- /dev/null
+++ b/files/zh-cn/web/css/_doublecolon_view-transition-image-pair/index.md
@@ -0,0 +1,62 @@
+---
+title: "::view-transition-image-pair"
+slug: Web/CSS/::view-transition-image-pair
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`::view-transition-image-pair`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)表示一个视图过渡的旧视图状态和新视图状态的容器——即过渡前和过渡后的状态。
+
+在视图过渡期间，`::view-transition-image-pair` 包含在相关的伪元素树上，如[视图过渡过程](/zh-CN/docs/Web/API/View_Transitions_API#视图过渡过程)中所述。它只能是 {{cssxref("::view-transition-group")}} 的子节点。并且可以有一个 {{cssxref("::view-transition-new")}} 或一个 {{cssxref("::view-transition-old")}} 子节点，亦或是两者都有。
+
+`::view-transition-image-pair` 在 UA 样式表中具有以下默认样式：
+
+```css
+html::view-transition-image-pair(*) {
+  position: absolute;
+  inset: 0;
+
+  animation-duration: inherit;
+  animation-fill-mode: inherit;
+}
+```
+
+默认情况下，`::view-transition-image-pair` 在视图过渡样式表中设置了 {{cssxref("isolation", "isolation: isolate")}}，以便其子元素可以使用非正常混合模式进行混合，而不会影响其他视觉输出。
+
+## 语法
+
+```css-nolint
+::view-transition-image-pair(<pt-name-selector>) {
+  /* ... */
+}
+```
+
+`<pt-name-selector>` 可以是以下任何值之一：
+
+- `*`
+  - : 使伪元素选择器匹配所有视图过渡组。
+- `root`
+  - : 使伪元素选择器匹配由 UA 创建的默认 `root` 视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过 {{cssxref("view-transition-name")}} 属性分配给特定视图过渡组的元素。
+- {{cssxref("custom-ident")}}
+  - : 使伪元素选择器匹配（通过 {{cssxref("view-transition-name")}} 属性将 {{cssxref("custom-ident")}} 分配给元素而创建的）特定视图转换组。
+
+## 示例
+
+```css
+::view-transition-image-pair(root) {
+  isolation: auto;
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [View Transitions API](/zh-CN/docs/Web/API/View_Transitions_API)
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/css/_doublecolon_view-transition-new/index.md b/files/zh-cn/web/css/_doublecolon_view-transition-new/index.md
new file mode 100644
index 00000000000000..2499e34b688637
--- /dev/null
+++ b/files/zh-cn/web/css/_doublecolon_view-transition-new/index.md
@@ -0,0 +1,107 @@
+---
+title: "::view-transition-new"
+slug: Web/CSS/::view-transition-new
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`::view-transition-new`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)表示视图过渡的新视图状态——即过渡后新视图的实时表示。
+
+在视图过渡期间，`::view-transition-new` 包含在相关的伪元素树上，如[视图过渡过程](/zh-CN/docs/Web/API/View_Transitions_API#视图过渡过程)中所述。它只能是 {{cssxref("::view-transition-image-pair")}} 的子节点，并且它不会有任何子节点。
+
+它是一个可替换元素，因此可以使用 {{cssxref("object-fit")}} 和 {{cssxref("object-position")}} 等属性进行操作。它的自然尺寸等于内容的大小。
+
+`::view-transition-new` 在 UA 样式表中具有以下默认样式：
+
+```css
+@keyframes -ua-view-transition-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+html::view-transition-new(*) {
+  position: absolute;
+  inset-block-start: 0;
+  inline-size: 100%;
+  block-size: auto;
+
+  animation-name: -ua-view-transition-fade-in;
+  animation-duration: inherit;
+  animation-fill-mode: inherit;
+}
+```
+
+> **备注：** 视图过渡样式表也会额外设置一些样式来动画化 `::view-transition-new`。这些样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的[设置过渡伪元素](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)和[更新伪元素样式](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)部分。
+
+## 语法
+
+```css-nolint
+::view-transition-new(<pt-name-selector>) {
+  /* ... */
+}
+```
+
+`<pt-name-selector>` 可以是以下任何值之一：
+
+- `*`
+  - : 使伪元素选择器匹配所有视图过渡组。
+- `root`
+  - : 使伪元素选择器匹配由 UA 创建的默认 `root` 视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过 {{cssxref("view-transition-name")}} 属性分配给特定视图过渡组的元素。
+- {{cssxref("custom-ident")}}
+  - : 使伪元素选择器匹配（通过 {{cssxref("view-transition-name")}} 属性将 {{cssxref("custom-ident")}} 分配给元素而创建的）特定视图转换组。
+
+## 示例
+
+```css
+figcaption {
+  view-transition-name: figure-caption;
+}
+
+@keyframes grow-x {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes shrink-x {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+::view-transition-old(figure-caption),
+::view-transition-new(figure-caption) {
+  height: auto;
+  right: 0;
+  left: auto;
+  transform-origin: right center;
+}
+
+::view-transition-old(figure-caption) {
+  animation: 0.25s linear both shrink-x;
+}
+
+::view-transition-new(figure-caption) {
+  animation: 0.25s 0.25s linear both grow-x;
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [View Transitions API](/zh-CN/docs/Web/API/View_Transitions_API)
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/css/_doublecolon_view-transition-old/index.md b/files/zh-cn/web/css/_doublecolon_view-transition-old/index.md
new file mode 100644
index 00000000000000..81df7be9c806e4
--- /dev/null
+++ b/files/zh-cn/web/css/_doublecolon_view-transition-old/index.md
@@ -0,0 +1,107 @@
+---
+title: "::view-transition-old"
+slug: Web/CSS/::view-transition-old
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`::view-transition-old`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)表示视图过渡的旧视图状态——即过渡前旧视图的静态屏幕截图。
+
+在视图过渡期间，`::view-transition-old` 包含在相关的伪元素树上，如[视图过渡过程](/zh-CN/docs/Web/API/View_Transitions_API#视图过渡过程)中所述，前提是有一个旧视图状态需要表示。它只能是 {{cssxref("::view-transition-image-pair")}} 的子节点，并且它不会有任何子节点。
+
+它是一个可替换元素，因此可以使用 {{cssxref("object-fit")}} 和 {{cssxref("object-position")}} 等属性进行操作。它的自然尺寸等于内容的大小。
+
+`::view-transition-old` 在 UA 样式表中具有以下默认样式：
+
+```css
+@keyframes -ua-view-transition-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+html::view-transition-old(*) {
+  position: absolute;
+  inset-block-start: 0;
+  inline-size: 100%;
+  block-size: auto;
+
+  animation-name: -ua-view-transition-fade-out;
+  animation-duration: inherit;
+  animation-fill-mode: inherit;
+}
+```
+
+> **备注：** 视图过渡样式表也会额外设置一些样式来动画化 `::view-transition-old`。这些样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范中的[设置过渡伪元素](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)和[更新伪元素样式](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)部分。
+
+## 语法
+
+```css-nolint
+::view-transition-old(<pt-name-selector>) {
+  /* ... */
+}
+```
+
+`<pt-name-selector>` 可以是以下任何值之一：
+
+- `*`
+  - : 使伪元素选择器匹配所有视图过渡组。
+- `root`
+  - : 使伪元素选择器匹配由 UA 创建的默认 `root` 视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过 {{cssxref("view-transition-name")}} 属性分配给特定视图过渡组的元素。
+- {{cssxref("custom-ident")}}
+  - : 使伪元素选择器匹配（通过 {{cssxref("view-transition-name")}} 属性将 {{cssxref("custom-ident")}} 分配给元素而创建的）特定视图转换组。
+
+## 示例
+
+```css
+figcaption {
+  view-transition-name: figure-caption;
+}
+
+@keyframes grow-x {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes shrink-x {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+::view-transition-old(figure-caption),
+::view-transition-new(figure-caption) {
+  height: auto;
+  right: 0;
+  left: auto;
+  transform-origin: right center;
+}
+
+::view-transition-old(figure-caption) {
+  animation: 0.25s linear both shrink-x;
+}
+
+::view-transition-new(figure-caption) {
+  animation: 0.25s 0.25s linear both grow-x;
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [View Transitions API](/zh-CN/docs/Web/API/View_Transitions_API)
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)
diff --git a/files/zh-cn/web/css/_doublecolon_view-transition/index.md b/files/zh-cn/web/css/_doublecolon_view-transition/index.md
new file mode 100644
index 00000000000000..761ba3bcc667f9
--- /dev/null
+++ b/files/zh-cn/web/css/_doublecolon_view-transition/index.md
@@ -0,0 +1,50 @@
+---
+title: "::view-transition"
+slug: Web/CSS/::view-transition
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+**`::view-transition`** [CSS](/zh-CN/docs/Web/CSS) [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)表示视图过渡叠加层的根元素，它包含所有视图过渡且位于所有其他页面内容的顶部。
+
+在视图过渡期间，`::view-transition` 包含在相关的伪元素树中，如[视图过渡过程](/zh-CN/docs/Web/API/View_Transitions_API#视图过渡过程)中所述。它是该树的顶级节点，并且有一个或多个 {{cssxref("::view-transition-group")}} 子节点。
+
+`::view-transition` 在 UA 样式表中具有以下默认样式：
+
+```css
+html::view-transition {
+  position: fixed;
+  inset: 0;
+}
+```
+
+所有 {{cssxref("::view-transition-group")}} 伪元素都相对于视图过渡根元素定位。
+
+## 语法
+
+```css
+::view-transition {
+  /* ... */
+}
+```
+
+## 示例
+
+```css
+::view-transition {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [View Transitions API](/zh-CN/docs/Web/API/View_Transitions_API)
+- [使用 View Transitions API 实现平滑、简单的过渡](https://developer.chrome.com/docs/web-platform/view-transitions/)