CSS 视图过渡（CSS view transition）模块定义了视图过渡 API 的行为，它允许开发人员在文档之内或在文档之间的不同状态之间创建动画过渡。此模块还定义了用于设置这些过渡样式的 CSS 属性和伪元素。

参考

属性

• view-transition-class
• view-transition-name

At 规则和描述符

• @view-transition
  • navigation 描述符

选择器和伪元素

• :active-view-transition
• :active-view-transition-type()
• ::view-transition
• ::view-transition-image-pair()
• ::view-transition-group()
• ::view-transition-new()
• ::view-transition-old()

接口

• CSSViewTransitionRule
• ViewTransition
  • ViewTransition.skipTransition() 方法
  • ViewTransition.updateCallbackDone
  • ViewTransition.ready
  • ViewTransition.finished
• Document.startViewTransition() 方法

指南

使用视图过渡 API

解释如何创建视图过渡和自定义过渡动画，包括操纵活动的视图过渡。

相关概念

• pagereveal 事件

• pageswap 事件

• Document.visibilityState

• CSS 动画模块

  • animation
  • @keyframes
  • CSSKeyframesRule
  • CSSStyleRule
  • Web 动画 API

• CSS 变换模块

  • transform
  • <transform-function>

规范

参见

• 伪元素
• 函数式伪类
• 学习：伪类和伪元素