CSS 过渡

1. 简介

本节不具有规范性。

本文档介绍了新的 CSS 特性，用于实现隐式过渡，即描述如何让 CSS 属性在指定的持续时间内从一个值平滑过渡到另一个值。

2. 过渡

通常，当 CSS 属性值发生变化时，渲染结果会立即更新，受影响的元素会立刻从旧属性值切换到新属性值。本节描述了如何使用新的 CSS 属性来指定过渡。这些属性用于让元素从旧状态平滑动画到新状态。

例如，假设在 left 和 background-color 属性上定义了 1 秒的过渡。下图展示了在某个元素上更新这些属性的效果，本例中是将元素向右移动并将背景颜色从红色变为蓝色。假定其他过渡参数仍为默认值。

过渡是一种表现效果。某个属性的 计算值 会在一段时间内从旧值过渡到新值。因此，如果脚本在属性发生过渡时查询该属性的 计算值（或依赖它的其他数据），将会得到一个表示当前动画状态的中间值。

属性的过渡通过一组新的属性定义。例如：

div {
  transition-property: opacity;
  transition-duration: 2s;
}

每个过渡属性都允许使用逗号分隔的列表，从而可以定义多个过渡，每个过渡作用于不同的属性。此时，各个过渡的参数都取自所有列表的相同索引。例如：

div {
  transition-property: opacity, left;
  transition-duration: 2s, 4s;
}

当过渡属性的值列表长度不一致时，transition-property 列表的长度决定了启动过渡时要检查的各列表项数。列表从第一个值开始匹配，末尾多余的值不被使用。如果某个属性的值数量不足以匹配 transition-property 的数量，用户代理需通过重复该属性的值列表直到数量足够来计算其使用值。这种截断或重复不会影响计算值。 注：此行为类似于 background-* 属性，其中 background-image 类似于 transition-property。

div {
  transition-property: opacity, left, top, width;
  transition-duration: 2s, 1s;
}

虽然作者可以利用过渡创建动态变化的内容，但动态变化的内容可能会导致部分用户癫痫发作。关于如何避免导致癫痫发作的内容，请参阅 指南 2.3：癫痫：勿设计已知会导致癫痫的内容 ([WCAG20])。

2.1. transition-property 属性

transition-property 属性用于指定要应用过渡的 CSS 属性名称。

none 表示没有任何属性会进行过渡。 其他情况下，会指定一个要过渡的属性列表，或者关键字 all，表示所有属性都要过渡。

如果列表中的某个标识符不是已识别的属性名，实现仍需对列表中的可动画属性启动过渡，并使用与 transition-duration、transition-delay 和 transition-timing-function 列表相同索引的参数。换言之，未识别的属性必须保留在列表中以保持索引匹配。

<custom-ident> 产生式在 <single-transition-property> 中还排除了关键字 none，以及 <custom-ident> 始终排除的关键字。即 none，inherit 和 initial 不允许作为多标识符列表中的项；包含这些关键字的列表是语法无效的。

对于 all 关键字，或者列表中的某个标识符为简写属性时，实现必须为其所有长属性（或对 all，即所有属性）启动过渡，并使用与简写属性对应索引的参数。

如果某个属性在 transition-property 的值中多次指定（无论是单独、通过包含它的简写属性，还是通过 all），则启动的过渡会使用 transition-property 值列表中最后一个要求动画该属性的项对应的参数。

注：all 值与 all 简写属性行为类似，因此 all 就像一个覆盖所有属性的简写一样。

2.2. transition-duration 属性

transition-duration 属性用于定义过渡所需的时间长度。

此属性用于指定从旧值过渡到新值所需的时间。默认值为 0s，意味着过渡是立即完成的（即没有动画）。transition-duration 的负值会使声明无效。

2.3. transition-timing-function 属性

transition-timing-function 属性用于描述过渡期间中间值的计算方式。它允许过渡在整个持续时间内速度发生变化，这类效果通常被称为缓动函数。

定时函数定义在单独的 CSS 缓动函数模块 [css-easing-1]。 使用的 输入进度值 是过渡持续时间的百分比，而 输出进度值 在插值属性值时作为 p 值使用（参见 §4 过渡的应用）。

2.4. transition-delay 属性

transition-delay 属性用于定义过渡何时开始。它允许过渡在应用后延迟一段时间才开始执行。当 transition-delay 的值为 0s 时，表示属性变更后立即执行过渡。否则，值指定了属性变更后延迟执行的时间偏移。

如果 transition-delay 的值为负时间偏移，则过渡会在属性变更后立即执行，但看起来会从指定偏移处开始。也就是说，过渡似乎从播放周期的一部分开始。如果过渡有隐含的起始值且 transition-delay 为负，则起始值取自属性变更的那一刻。

2.5. transition 复合属性

transition 复合属性将上述四个属性合并为一个属性。

请注意，此属性中的顺序很重要：第一个可解析为时间的值分配给 transition-duration，第二个可解析为时间的值分配给 transition-delay。

如果在复合属性中存在多个 <single-transition>，且其中任何过渡的 <single-transition-property> 为 none，则该声明无效。

3. 过渡的开始

实现必须维护一组正在运行的过渡， 每个过渡都应用于特定的元素和非简写属性。这些过渡还包含开始时间、结束时间、起始值、结束值、反转调整起始值，以及反转缩短因子。 过渡根据本节描述被加入该集合， 当它们完成或实现需要取消时被移出集合。关于 反转调整起始值和 反转缩短因子的原理，参见 §3.1 中断过渡的更快反转。

实现还必须维护一组已完成的过渡， 它们（与正在运行的过渡类似） 也应用于特定的元素和非简写属性。 本规范保持不变量，即 同一个属性和元素不会同时拥有正在运行的过渡和 已完成的过渡。

如果某元素不再在文档中， 实现必须取消 该元素上的所有正在运行的过渡， 并移除该元素上的已完成的过渡。

多种情况都可能导致某元素上的属性计算值发生变化。 包括元素被插入或移出文档树 （这既改变了元素是否有计算值， 也可能通过选择器匹配改变其他元素的样式）， 对文档树的更改导致选择器匹配变化， 样式表或样式属性的更改， 以及其他因素。 本规范不定义计算值何时更新， 仅要求实现不得在 未更新计算值的情况下使用、呈现或显示由 CSS 层叠、值计算和继承过程产生的结果[CSS3CASCADE]， 这意味着实现不能通过声称未在样式变化处理时更新计算值来规避本规范要求。 但当实现更新某元素的某属性计算值以反映这些变化， 或为新加入文档的元素计算某属性计算值时， 必须一次性同步更新所有属性和元素的计算值以反映全部这些变化 （或至少不能被检测到不是同时完成的）。 这一组同步样式变化的处理称为样式变化事件。 （实现通常会有一个样式变化事件 对应期望的屏幕刷新率， 当需要获取最新计算样式或布局信息以供依赖它的脚本 API 使用时也会触发。）

由于本规范未定义 样式变化事件 何时发生， 以及哪些计算值变化被视为同时发生， 作者应注意， 在可能触发过渡的变化之后短时间内修改任何过渡属性， 可能导致不同实现之间行为不同， 因为某些实现可能认为这些变化是同时发生的，而其他实现则不是。

当发生样式变化事件时， 实现必须基于该事件中变化的 计算值启动过渡。 如果某元素在该 样式变化事件期间未在文档中，或在前一个样式变化事件期间未在文档中， 则不会为该元素启动过渡。 否则， 定义变化前样式 为前一次样式变化事件时该元素所有属性的计算值， 但任何来自声明式动画（如 CSS Transitions、CSS Animations ([CSS3-ANIMATIONS])， 和 SMIL Animations ([SMIL-ANIMATION], [SVG11])）的样式需按当前时间更新。 同样，定义变化后样式 为该元素所有属性的计算值， 基于该样式变化事件开始时已知的信息计算， 但使用变化前样式中的 animation-* 属性的计算值， 排除 CSS Transitions 产生的样式， 并从父元素的 变化后样式继承。 注意，这意味着变化后样式不会因新创建或取消的 CSS Animations 而与变化前样式不同。

对于每个拥有变化前样式和 变化后样式的元素， 以及每个（非简写）属性， 定义匹配的 transition-property 值 为元素变化后样式的 transition-property 列表中最后一个与该属性匹配的值， 详见 §2.1 transition-property 属性。 如果存在该值，则与之对应的有 匹配的 transition-duration、 匹配的 transition-delay， 以及 匹配的 transition-timing-function， 分别取自元素变化后样式中的 transition-duration、 transition-delay 和 transition-timing-function（参见列表匹配规则）。 定义该过渡的综合持续时间 为 max(匹配的 transition-duration, 0s) 与 匹配的 transition-delay 之和。

比较某属性的变化前样式和变化后样式时， 如果属性值具有动画类型 且既不是 不可动画 也不是 离散， 则该属性值是可过渡的。

注意：即使某属性定义为具有非离散 的动画类型， 某一对属性值之间的动画类型也可能是离散的。 例如， box-shadow 属性的动画类型为阴影列表， 其中若一个值有 inset 关键字而另一个没有，则采用离散动画。 因此，0px 0px black 和 inset 10px 10px black不是可过渡的。

对于每个元素和属性，实现必须执行如下操作：

1. 如果以下条件全部成立：
   • 该元素没有该属性的 正在运行的过渡，
   • 该属性的变化前样式与 变化后样式不同， 且属性值是可过渡的，
   • 该元素没有该属性的已完成的过渡 或该已完成的过渡的 结束值 与该属性的变化后样式不同，
   • 存在匹配的 transition-property 值，
   • 综合持续时间大于0s，
   则实现必须 从已完成过渡集合中移除该属性的已完成的过渡（如有）， 并启动一个过渡，其：
   • 开始时间 为 样式变化事件的时间加 匹配的 transition delay，
   • 结束时间 为 开始时间 加 匹配的 transition duration，
   • 起始值 为变化前样式中该属性的值，
   • 结束值 为变化后样式中该属性的值，
   • 反转调整起始值 与起始值相同，
   • 反转缩短因子为 1。
2. 否则， 如果该元素有该属性的已完成的过渡 且该已完成的过渡的结束值 与该属性的变化后样式不同， 则实现必须 从已完成的过渡集合中移除该过渡。
3. 如果该元素有该属性的正在运行的过渡或已完成的过渡， 且不存在匹配的 transition-property 值， 则实现必须取消该正在运行的过渡或从已完成的过渡集合中移除该过渡。
4. 如果该元素有该属性的正在运行的过渡， 存在匹配的 transition-property 值， 且正在运行的过渡的结束值 不等于变化后样式中该属性的值， 则：
   1. 如果当前值 与变化后样式中该属性值相同， 或这两个值不是可过渡的， 则实现必须取消该正在运行的过渡。
   2. 否则，如果综合持续时间 小于或等于0s， 或当前值 与变化后样式中该属性值不是可过渡的， 则实现必须取消该正在运行的过渡。
   3. 否则，如果反转调整起始值 与变化后样式中该属性值相同(关于为何出现此情况，参见过渡反转章节)， 实现必须取消该正在运行的过渡， 并启动新过渡，其：
      • 反转调整起始值 为正在运行的过渡的 结束值 (注：代表过渡的逻辑起始状态，使某些计算可忽略过渡实际已在达到该状态前开始，这样可支持重复反转同一过渡的正确处理)
      • 反转缩短因子 为以下两项之和的绝对值，并限制在 [0, 1] 范围：
        1. 旧过渡的定时函数在样式变化事件时刻的输出，乘以旧过渡的 反转缩短因子
        2. 1 减去旧过渡的 反转缩短因子
        注：表示旧过渡已遍历的起始值与结束值之间空间的比例（以值为单位，不是时间），绝对值与限制用于处理定时函数的 y1 或 y2 超出 [0, 1] 范围。
      • 开始时间 为样式变化事件时刻加：
        1. 若匹配的 transition delay为非负， 则为匹配的 transition delay
        2. 若匹配的 transition delay为负， 则为新过渡的反转缩短因子乘以匹配的 transition delay
      • 结束时间 为开始时间 加新过渡的匹配的 transition duration 乘以反转缩短因子
      • 起始值 为正在运行的过渡中该属性的 当前值
      • 结束值 为变化后样式中该属性的值
   4. 否则，实现必须取消正在运行的过渡， 并启动新过渡，其：
      • 开始时间 为样式变化事件时刻加 匹配的 transition delay
      • 结束时间 为开始时间 加匹配的 transition duration
      • 起始值 为正在运行的过渡中该属性的 当前值
      • 结束值 为变化后样式中该属性的值
      • 反转调整起始值 与起始值相同
      • 反转缩短因子 为 1

li {
  transition: background-color linear 1s;
  background: blue;
}
li:hover {
  background-color: green;
  transition-duration: 2s; /* 应用于到 :hover 状态的过渡 */
}

请注意，一旦属性的过渡开始（包括处于延迟阶段时）， 即使 transition-timing-function、transition-duration 或 transition-delay 属性在过渡完成前发生变化， 过渡仍然基于原始的定时函数、时长和延迟继续运行。 但如果 transition-property 属性变化导致过渡本不会启动，则过渡会停止（属性会立即变为最终值）。

请注意上述规则意味着， 当属性计算值因声明式动画（而非脚本动画）变化时，过渡不会启动。 因为变化前样式包含了声明式动画的最新样式。

3.1. 中断过渡的更快反转

4. 过渡的应用

当元素上的某属性处于过渡状态（即过渡已开始但尚未到达 结束时间）， 过渡会向 CSS 层叠中添加一个称为 当前值 的样式， 其层级由 [CSS3CASCADE] 中 CSS 过渡定义。

注意：由 CSS 过渡产生的计算值可像其它计算值一样继承到后代元素。 正常情况下，这意味着继承属性的过渡会像作者所预期的那样作用到后代元素。

实现必须仅在该属性当前未在同一元素上进行 CSS Animation ([CSS3-ANIMATIONS]) 时， 才将该值加入层叠。

注意：当同一元素和属性上运行动画时，过渡不参与层叠， 但这不影响过渡是否已开始或结束。 暴露过渡运行状态的 API（如 过渡事件）仍会报告过渡正在运行。

若当前时间早于或等于过渡的 开始时间（即处于延迟阶段）， 当前值 是指定样式， 其计算值为过渡的 起始值。

若当前时间晚于过渡的 开始时间（即处于过渡时长阶段）， 当前值 是指定样式， 其计算值为如下插值结果：

• V_a：过渡的 起始值

• V_b：过渡的 结束值

• p：以（当前时间 - 开始时间）/（结束时间 - 开始时间）为输入的定时函数的输出

具体的插值过程由属性的动画类型定义。

5. 过渡的完成

正在运行的过渡 会在其结束时间或之后（但在第一个样式变化事件时间到达或超过其 结束时间 前）完成。 当过渡完成时， 实现必须将所有在该时刻完成的过渡 从正在运行的过渡集合移动到已完成的过渡集合， 然后触发这些完成事件的事件。 （注意：如果不是先完成全部移动再触发事件， 可能导致样式变化事件发生时有必要完成的过渡未完成， 因为事件处理器若请求最新的计算样式或布局数据会触发样式变化事件。）

6. 过渡事件

CSS 过渡的创建、开始、完成和取消会生成对应的 DOM 事件。 每个属性的过渡都会向元素分发一个事件， 允许内容开发者实现与过渡变化同步的操作。

每个事件会提供该过渡关联的属性名称以及过渡的时长。

6.1. 接口 TransitionEvent

TransitionEvent 接口提供与过渡相关的具体上下文信息。

6.1.1. IDL 定义

[Exposed=Window,
 Constructor(CSSOMString type, optional TransitionEventInit transitionEventInitDict)]
interface TransitionEvent : Event {
  readonly attribute CSSOMString propertyName;
  readonly attribute double elapsedTime;
  readonly attribute CSSOMString pseudoElement;
};

dictionary TransitionEventInit : EventInit {
  CSSOMString propertyName = "";
  double elapsedTime = 0.0;
  CSSOMString pseudoElement = "";
};

6.1.2. 属性

propertyName, 类型为 CSSOMString，只读

与过渡关联的 CSS 属性名称。

注意：始终为长属性名称。关于简写属性如何触发长属性的过渡，见 transition-property。

elapsedTime, 类型为 double，只读

事件触发时，过渡已运行的时间（秒），不包括延迟阶段所花费的时间。 该成员的计算方式随各事件类型定义。

pseudoElement, 类型为 CSSOMString，只读

发生过渡的 CSS 伪元素名称（以两个冒号开头）， 若过渡发生在伪元素上，则事件目标为该伪元素对应的元素； 若过渡发生在元素上，则该字符串为空，事件目标为该元素。

TransitionEvent(type, transitionEventInitDict) 是一个事件构造函数。

6.2. TransitionEvent 的类型

可能发生的过渡事件类型如下：

transitionrun

transitionrun 事件在创建过渡（即添加到正在运行的过渡集合时）发生。

负值的 transition-delay 会导致事件的 elapsedTime 为延迟的绝对值，但不会超过动画的 transition-duration。即， elapsedTime 等于 min(max(-transition-delay, 0), transition-duration)。

• 可冒泡：是
• 不可取消
• 上下文信息：propertyName, elapsedTime, pseudoElement

transitionstart

transitionstart 事件在过渡的延迟阶段结束时发生。

elapsedTime 的值与 transitionrun 事件一致。

• 可冒泡：是
• 不可取消
• 上下文信息：propertyName, elapsedTime, pseudoElement

transitionend

transitionend 事件在过渡完成时发生。如果在过渡完成前被移除（如移除了 transition-property），则不会触发事件。

此事件的 elapsedTime 等于 transition-duration 的值。

• 可冒泡：是
• 不可取消
• 上下文信息：propertyName, elapsedTime, pseudoElement

transitioncancel

transitioncancel 事件在过渡被取消时发生。

elapsedTime 为从延迟结束到取消过渡时经过的秒数。 如果过渡有负值 transition-delay， 则过渡开始时间等于实际触发前的 transition-delay 绝对值秒。 如果过渡有正值 transition-delay，且事件在延迟过期前触发，则 elapsedTime 为零。

• 可冒泡：是
• 不可取消
• 上下文信息：propertyName, elapsedTime, pseudoElement

6.3. 元素、Document对象和Window对象上的事件处理器

下列事件处理器（及其对应的事件处理器事件类型）必须被所有HTML元素支持， 既作为事件处理器内容属性， 也作为事件处理器IDL属性； 并且必须被所有Document 和Window 对象支持，作为事件处理器IDL属性：

7. DOM 接口

本规范扩展了HTML中的GlobalEventHandlers 接口， 添加了transition事件的事件处理器IDL属性， 详见§6.3 元素、Document对象和Window对象上的事件处理器。

7.1. IDL定义

partial interface GlobalEventHandlers {
  attribute EventHandler ontransitionrun;
  attribute EventHandler ontransitionstart;
  attribute EventHandler ontransitionend;
  attribute EventHandler ontransitioncancel;
};

8. 安全性考量

本节不具有规范性。

本规范的安全影响有限， 因为它并没有让网页内容能够做原本不能做的事， 而是让原本只能用脚本实现的功能可以通过声明式方式实现， 并允许实现可优化（如帧率和CPU使用率）。

实现可以进行的主要优化之一， 是让某些高价值属性（如transform 和opacity） 的动画在浏览器的合成线程或进程上运行， 无需在主网页内容线程上更新样式或布局（除非需要最新样式数据）。 这种优化通常需要分配显存以显示被动画的元素内容。 实现应确保网页内容不能通过大量动画或在覆盖大面积元素上动画 （无论面积定义为变换前还是变换后）来触发不安全的内存溢出处理。

9. 隐私考量

本节不具有规范性。

与安全性类似， 本规范的隐私考量也有限， 因为它并未让网页内容能做原本不能做的事。

本规范可能提供额外的机制， 帮助判断用户硬件或软件的特性。 然而，判断用户硬件或软件性能特性的能力在许多Web技术中都很常见， 本规范并未引入新能力。

如§10 可访问性考量所述， 实现可能会提供帮助残障用户的措施。 这些措施可能被网页内容检测到， 这意味着受益于这些措施的用户可能需要在隐私和获得帮助之间权衡。

10. 可访问性考量

本节不具有规范性。

10.1. 动效

本规范为先前只能通过脚本实现的动画提供了声明式机制。 声明式机制有多重影响： 它让动画更容易实现，因此更常见， 同时也让用户代理更容易在需要满足可访问性需求时修改这些动画。

因此，对运动敏感或需要额外时间阅读或理解内容的用户， 可以通过用户代理的功能关闭或减慢动画而受益。 （但参见§9 隐私考量了解此类措施的隐私影响。）

用户代理实现者应注意， 网页内容可能依赖过渡事件的触发， 因此在实现此类措施时，即使未作为连续动画运行过渡，也可以考虑触发过渡事件。 但让网页内容依赖这些事件来正常工作通常不是好的实践。

10.2. 层叠

CSS 层叠是CSS中的通用机制， 允许用户需求与作者样式交互。 本规范与层叠机制交互， 但因为它只允许在已有层叠规则结果值之间动画， 并不会影响用户强制CSS属性取特定值的能力。

层叠机制也允许用户通过覆盖过渡属性来完全禁用过渡。

11. 自2017年11月30日工作草案以来的变更

自2017年11月30日工作草案以来的实质性变更如下：

• 撤销了原本会对无法平滑插值的某些值使用离散动画触发过渡的更改， 因为没有任何用户代理实现此更改，且可能导致兼容性问题。

• 将属性插值方式的定义迁移到 Web Animations 和 CSS Values and Units。

更多变更详情见版本控制变更日志。

早期工作草案的变更：

1. 参见2017年11月30日工作草案中的变更章节。

2. 参见2013年11月19日工作草案中的变更章节。

3. 参见以往草案的ChangeLog。

4. 更多变更详情见版本控制变更日志（因文件重命名分为多部分）：

   • 自2017年10月12日以来变更日志，

   • 2015年1月26日至2017年10月12日变更日志，

   • 2013年3月28日至2015年1月26日变更日志，

   • 2013年3月28日前变更日志。

12. 致谢

特别感谢以下人员的反馈： Tab Atkins、 Carine Bournez、 Aryeh Gregor、 Vincent Hardy、 Anne van Kesteren、 Cameron McCormack、 Alex Mogilevsky、 Jasper St. Pierre、 Estelle Weyl， 以及所有www-style社区成员。