CSS 过渡模块第 1 级

W3C 工作草案

关于此文档的更多细节
此版本
https://w3org.cn/TR/2026/WD-css-transitions-1-20260108/
最新发布版本
https://w3org.cn/TR/css-transitions-1/
编辑草案
https://drafts.csswg.org/css-transitions/
历史版本
历史
https://w3org.cn/standards/history/css-transitions-1/
测试套件
https://wpt.fyi/results/css/css-transitions
https://wpt.fyi/results/css/css-transitions/
反馈
CSS 工作组问题仓库
针对所有级别的 Bugzilla 错误报告
编辑
L. David Baron (Google)
Mozilla
前任编辑
(Apple Inc)
(Apple Inc)
(Apple Inc)
建议编辑此规范
GitHub 编辑器

摘要

CSS 过渡(Transitions)允许 CSS 属性值的变化在指定的持续时间内平滑地发生。

CSS 是一种用于描述结构化文档(如 HTML 和 XML)在屏幕、纸张等介质上渲染方式的语言。

关于本文档

本节描述了本文件发布时的状态。当前 W3C 出版物列表及本技术报告的最新修订版可在 W3C 标准和草案索引中找到。

本文件由 CSS 工作组推荐标准轨道发布为工作草案。发布为工作草案并不意味着 W3C 及其成员的认可。

这是一个草案文档,可能随时会被其他文档更新、替换或废弃。将其作为进展中的工作之外的任何内容进行引用是不恰当的。

请通过 在 GitHub 上提交议题(首选方式)发送反馈,并在标题中包含规范代码“css-transitions”,例如:“[css-transitions] …评论摘要…”。所有议题和评论均已 存档。或者,也可以将反馈发送至(已存档的)公共邮件列表 www-style@w3.org

本文件受 2025 年 8 月 18 日 W3C 流程文件的管辖。

本文档由在一个受 W3C 专利政策约束下运作的组织制作。W3C 维护着一份与该组织交付成果相关的专利披露公开列表;该页面还包含了披露专利的说明。任何个人如果确实获知其认为包含必要权利要求 (Essential Claim) 的专利,必须根据 W3C 专利政策第 6 节披露该信息。

本文件预计已接近最终定稿(Last Call)。尽管提出的一些议题尚未解决,但极不可能在此级别中考虑新功能。

1. 引言

本节不具有规范性。

本文件引入了新的 CSS 功能以启用隐式过渡,描述了 CSS 属性如何能够在给定的持续时间内从一个值平滑地变化到另一个值。

测试

崩溃测试


1.1. 值定义

本规范遵循 [CSS2] 中的 CSS 属性定义约定,并使用 [CSS-VALUES-3] 中的 值定义语法。本规范中未定义的值类型在 CSS Values & Units [CSS-VALUES-3] 中定义。与其他 CSS 模块的组合可能会扩展这些值类型的定义。

除了定义中列出的属性特定值外,本规范中定义的所有属性也都接受 CSS 全局关键字 作为其属性值。为了可读性,未明确重复列出。

2. 过渡(Transitions)

通常,当 CSS 属性值发生变化时,渲染结果会立即更新,受影响的元素会立即从旧属性值变为新属性值。本节描述了一种使用新的 CSS 属性指定渐进式过渡的方法。这些属性用于随时间推移从旧状态平滑地动画化到新状态。

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

Example showing the initial, intermediate, and final states of a box whose color and position is interpolated
leftbackground-color 的过渡。

过渡是一种呈现效果。属性的 计算值(computed value) 随时间从旧值平滑过渡到新值。因此,如果脚本在属性过渡过程中查询其 计算值(或依赖于它的其他数据),它将看到表示该属性当前动画状态的中间值。

属性的过渡通过多个新属性来定义。例如

示例

div {
  transition-property: opacity;
  transition-duration: 2s;
}
以上示例定义了 opacity 属性的过渡,当为其赋新值时,会在两秒内导致旧值与新值之间的平滑变化。

每个过渡属性都接受逗号分隔的列表,允许定义多个过渡,每个过渡作用于不同的属性。在这种情况下,各个过渡从所有列表中相同索引处获取其参数。例如

示例

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

这将导致 opacity 属性在两秒内过渡,而 left 属性在四秒内过渡。

在过渡属性中的值列表长度不一致的情况下,transition-property 列表的长度决定了在启动过渡时要检查的每个列表的项目数。列表从第一个值开始匹配:末尾多出的值不会被使用。如果其他属性之一没有足够的逗号分隔值来匹配 transition-property 的值数量,用户代理必须通过重复值列表直到有足够数量来计算其使用值。这种截断或重复不会影响计算值。 注:这类似于 background-* 属性的行为,其中 background-image 类似于 transition-property

示例

div {
  transition-property: opacity, left, top, width;
  transition-duration: 2s, 1s;
}
以上示例定义了 opacity 属性的 2 秒过渡、left 属性的 1 秒过渡、top 属性的 2 秒过渡以及 width 属性的 1 秒过渡。

虽然作者可以使用过渡来创建动态变化的内容,但动态变化的内容可能会导致某些用户癫痫发作。有关如何避免可能导致癫痫发作的内容的信息,请参阅 准则 2.3:癫痫发作:不要以已知会导致癫痫发作的方式设计内容 ([WCAG20])。

测试

2.1. transition-property 属性

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

名称transition-property
none | <single-transition-property>#
初始值 all
应用于 所有元素
可继承
百分比 不适用
计算值 关键字 none,否则为标识符列表
规范顺序 按语法
动画类型 不可动画
测试
<single-transition-property> = all | <custom-ident>

none 表示没有属性将发生过渡。否则,给出一个要进行过渡的属性列表,或者关键字 all,表示所有属性都将进行过渡。

如果所列的标识符之一不是公认的属性名称,实现仍然必须在列表中的可动画化属性上开始过渡,并使用其在 transition-durationtransition-delaytransition-timing-function 列表各自索引处的持续时间、延迟和定时函数。换句话说,必须保留未识别的属性在列表中以保持索引的匹配。

<custom-ident><single-transition-property> 中的产生式除了排除 <custom-ident> 中总是排除的关键字外,还排除了关键字 none。这意味着在包含多个标识符的列表中,noneinheritinitial 不被允许作为其中的项目;任何使用它们的列表在语法上都是无效的。

对于关键字 all,或者如果所列的标识符之一是简写属性,实现必须为其所有长手属性子项(对于 all,则为所有属性)启动过渡,并使用对应于该简写属性索引处的持续时间、延迟和定时函数。

如果在 transition-property 的值中多次指定了某个属性(无论是单独指定、通过包含它的简写属性指定,还是通过 all 值指定),那么启动的过渡将使用 transition-property 值中对应于调用动画化该属性的最后一个项目的索引处的持续时间、延迟和定时函数。

注:all 值和 all 简写属性的工作方式类似,因此 all 值就像一个涵盖所有属性的简写。

2.2. transition-duration 属性

transition-duration 属性定义过渡所花费的时间长度。

名称transition-duration
<time [0s,∞]>#
初始值 0s
应用于 所有元素
可继承
百分比 不适用
计算值 列表,每一项为一个持续时间
规范顺序 按语法
动画类型 不可动画
测试

此属性指定旧值到新值的过渡应花费多长时间。默认值为 0s,意味着过渡是即时的(即不会有动画)。transition-duration 的负值会导致声明无效。

2.3. transition-timing-function 属性

transition-timing-function 属性描述了在过渡过程中如何计算中间值。它允许过渡在其持续时间内改变速度。这些效果通常被称为 缓动(easing) 函数。

定时函数定义在独立的 CSS 缓动函数模块 [css-easing-1] 中。使用的 输入进度值(input progress value) 是过渡持续时间的百分比,输出进度值(output progress value) 用作插值(interpolating)属性值时的 p 值(参见 § 4 过渡的应用)。

名称transition-timing-function
<easing-function>#
初始值 ease
应用于 所有元素
可继承
百分比 不适用
计算值 按指定值
规范顺序 按语法
动画类型 不可动画
测试

2.4. transition-delay 属性

transition-delay 属性定义过渡何时开始。它允许过渡在应用后经过一段时间再开始执行。transition-delay 值为 0s 意味着过渡将在属性更改时立即执行。否则,该值指定从属性更改那一刻起的偏移量,并且过渡将延迟该偏移量执行。

如果 transition-delay 的值是负的时间偏移量,则过渡将在属性更改时立即执行,但看起来会在指定的偏移量处开始。也就是说,过渡看起来会在其播放周期的中途开始。在过渡具有隐式起始值且 transition-delay 为负值的情况下,起始值取自属性更改的那一刻。

名称transition-delay
<time>#
初始值 0s
应用于 所有元素
可继承
百分比 不适用
计算值 列表,每一项为一个持续时间
规范顺序 按语法
动画类型 不可动画
测试

2.5. transition 简写属性

transition 简写属性将上述四个属性合并为一个单一属性。

名称transition
<single-transition>#
初始值 见各个属性
应用于 所有元素
可继承
百分比 不适用
计算值 见各个属性
动画类型 不可动画
规范顺序 按语法
测试
<single-transition> = [ none | <single-transition-property> ] || <time> || <easing-function> || <time>

请注意,此属性中的项目顺序很重要:第一个可以解析为时间的值会被分配给 transition-duration,第二个可以解析为时间的值会被分配给 transition-delay。

如果简写属性中有多个 <single-transition>,且任何过渡以 none 作为 <single-transition-property>,则该声明无效。

3. 过渡的启动

实现必须维护一组 正在运行的过渡(running transitions),每一个都应用于特定的元素和非简写属性。每个此类过渡还具有 开始时间结束时间起始值结束值反转调整后的起始值反转缩短因子。过渡将按本节所述添加到此集合中,并在它们 完成(complete) 或实现被要求 取消(cancel) 它们时被移除。 关于 反转调整后的起始值反转缩短因子 背后的原理,请参阅 § 3.1 加快被中断过渡的反转

测试

实现还必须维护一组 已完成的过渡(completed transitions),每一个(像 正在运行的过渡 一样)都应用于特定的元素和非简写属性。 本规范维护一个不变性,即对于相同的属性和元素,绝不会同时存在 正在运行的过渡已完成的过渡

如果一个元素不再存在于文档中,实现必须 取消 其上任何 正在运行的过渡,并从 已完成的过渡 中移除其相关的过渡。

需要维护这组已完成的过渡,以防止过渡在某些情况下重复自身,即为了维护本规范旨在保持的不变性,即不相关的样式变化不应触发过渡。

必须维护已完成过渡集合的一个例子是继承属性上的过渡,父元素指定了该属性较长时间的过渡(例如 transition: 4s text-indent),而继承了父值并指定了该属性较短时间过渡(例如 transition: 1s text-indent)的子元素。如果没有维护此已完成过渡集合,实现可能会在子元素初始的 1 秒过渡完成后,在子元素上开始额外的过渡。

各种因素都可能导致元素上属性的 计算值 发生变化。这些因素包括从文档树中插入和移除元素(这既改变了这些元素是否拥有 计算值,也可能通过选择器匹配改变其他元素的样式)、导致选择器匹配元素发生变化的文档树变化、样式表或样式属性的变更,以及其他因素。本规范除了规定实现不得在不更新 计算值 的情况下使用、呈现或显示 CSS 层叠、值计算和继承过程 [CSS3CASCADE] 产生的结果外,并未定义何时更新 计算值(这意味着实现不能通过声称在处理样式变化时未更新 计算值 来规避本规范的要求)。然而,当实现更新元素上的属性 计算值 以反映这些变化之一,或者计算新添加到文档的元素上的属性 计算值 时,它必须同时更新所有属性和元素的 计算值 以反映所有这些变化(或者至少在检测上必须是同时完成的)。这种对一组同时发生的样式变化的处理被称为 样式变化事件(style change event)。(实现通常具有一个 样式变化事件,以对应其期望的屏幕刷新率,以及当依赖于它的脚本 API 需要最新的计算样式或布局信息时。)

测试

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

样式变化事件 发生时,实现必须根据在该事件中改变的 计算值 启动过渡。如果元素在本次样式变化事件中不在文档中,或者在上一次样式变化事件中不在文档中,则不会为该元素在本次事件中启动过渡。否则,定义 变化前样式(before-change style) 为元素上截至上一次 样式变化事件 的所有属性的 计算值,但任何源自声明式动画(如 CSS Transitions、CSS Animations ([CSS3-ANIMATIONS]) 和 SMIL Animations ([SMIL-ANIMATION], [SVG11]))的样式更新到当前时间的情况除外。同样,定义 变化后样式(after-change style) 为基于该 样式变化事件 开始时已知信息的所有属性的 计算值,但使用来自 变化前样式animation-* 属性的计算值,计算中排除任何来自 CSS Transitions 的样式,并从父元素的 变化后样式 继承。请注意,这意味着 变化后样式 不会由于新创建或取消的 CSS Animations 而与 变化前样式 产生差异。

测试

请注意,此 变化后样式 的定义意味着单个变化可以在祖先元素及其后代元素上对同一属性启动过渡。当属性变化从具有 transition-* 属性(指定对变化属性进行动画处理)的元素继承到另一个也具有 transition-* 属性(同样指定对变化属性进行动画处理)的元素时,可能会发生这种情况。

当发生这种情况时,两个过渡都将运行,由于正常的 CSS 层叠和继承规则 ([CSS3CASCADE]),后代上的过渡将覆盖祖先上的过渡。

如果后代上的过渡在祖先上的过渡之前完成,后代将恢复继承(仍在过渡中的)父元素的值。这种效果可能并非作者所愿,但它本质上正是作者所要求的效果。

对于每个具有 变化前样式变化后样式 的元素,以及每个属性(非简写属性),定义 匹配的 transition-property 值 为元素 变化后样式transition-property 的最后一个匹配该属性的值(如 § 2.1 transition-property 属性 所述)。如果存在这样的值,则与其对应的是 变化后样式transition-durationtransition-delaytransition-timing-function 值中的 匹配过渡持续时间匹配过渡延迟匹配过渡定时函数(参见 列表匹配规则)。定义过渡的 组合持续时间(combined duration)匹配过渡持续时间(与 0s 取最大值)和 匹配过渡延迟 之和。

在比较给定属性的 变化前样式变化后样式 时,如果属性值的 动画类型不是 不可动画化(not animatable)不是 离散(discrete) 的,则它们是 可过渡的(transitionable)

注意: 即使一个 属性 被定义为具有 离散动画类型,对于特定的一对 属性值,其 动画类型 也可能是 离散 的。例如,box-shadow 属性的 动画类型阴影列表(shadow list),其定义了当 inset 关键字在一个值中缺失而在另一个值中存在时,使用 离散 动画。因此,0px 0px blackinset 10px 10px black 不是 可过渡的

对于每个元素和属性,实现必须执行以下操作

  1. 如果以下所有条件均为真则实现必须从已完成的过渡集合中移除 已完成的过渡(如果存在),并启动一个过渡,其
  2. 否则,如果该元素具有该属性的 已完成的过渡,且该 已完成的过渡结束值 与该属性的 变化后样式 不同,则实现必须从 已完成的过渡 集合中移除该 已完成的过渡
  3. 如果元素对该属性存在运行中的过渡已完成的过渡,且没有匹配的 transition-property 值,则实现必须取消运行中的过渡,或者从已完成的过渡集合中移除该已完成的过渡
  4. 如果元素对该属性存在运行中的过渡,且存在一个匹配的 transition-property 值,并且运行中的过渡结束值等于变更后样式中该属性的值,则
    1. 如果运行中的过渡中该属性的当前值等于变更后样式中该属性的值,或者这两个值不可过渡,则实现必须取消运行中的过渡
    2. 否则,如果组合持续时间小于或等于 0s,或者运行中的过渡中该属性的当前值无法与变更后样式中该属性的值进行过渡,则实现必须取消运行中的过渡
    3. 否则,如果运行中的过渡反向调整后的起始值变更后样式中该属性的值相同 (参见关于过渡反向的章节了解为何存在此种情况),实现必须取消运行中的过渡并启动一个新的过渡,其
    4. 否则,实现必须取消运行中的过渡并启动一个新的过渡,其

请注意,上述规则意味着当可动画属性的计算值发生变化时,启动的过渡取决于该属性首次获得新计算值时 transition-propertytransition-durationtransition-timing-functiontransition-delay 属性的值。这意味着当这些 transition-* 属性之一与可能发生过渡的属性同时发生变化时,是这些 transition-* 属性的新值在控制该过渡。

示例

这为作者提供了一种在两个状态之间切换时,为“向前”和“向后”过渡指定不同 transition-* 属性值的方法(但关于不完整过渡被中断时的特殊反向行为,请参见下方)。作者可以在指定触发过渡值的同一规则中指定 transition-durationtransition-timing-functiontransition-delay 的值,或者在更改触发过渡的属性的同时更改这些属性。由于是这些 transition-* 属性的新值影响了过渡,这些值将用于相关过渡值进行的过渡。例如:

li {
  transition: background-color linear 1s;
  background: blue;
}
li:hover {
  background-color: green;
  transition-duration: 2s; /* applies to the transition *to* the :hover state */
}

当包含这些样式规则的列表项进入 :hover 状态时,在 background-color 获得新值(green)时,计算出的 transition-duration2s,因此从 bluegreen 的过渡耗时 2 秒。然而,当列表项离开 :hover 状态时,从 greenblue 的过渡耗时 1 秒。

请注意,一旦属性的过渡已经开始(包括处于其延迟阶段),它就会根据原始的计时函数、持续时间和延迟继续运行,即使 transition-timing-functiontransition-durationtransition-delay 属性在过渡完成之前发生了变化。但是,如果 transition-property 属性发生变化,导致过渡本不会开始,则过渡停止(且该属性立即变为其最终值)。

请注意,上述规则意味着当属性的计算值因声明式动画(相对于脚本化动画)而发生变化时,过渡不会启动。发生这种情况是因为变更前样式包含了声明式动画的最新样式。

测试

3.1. 更快的被中断过渡的反向

许多常见的过渡效果涉及两个状态之间的切换,例如当鼠标指针移动到用户界面元素上方,然后稍后移出该元素时发生的过渡。在这些效果中,运行中的过渡在完成之前被中断,并将属性重置为该过渡起始值的情况很常见。一个例子是元素的悬停效果,当指针进入元素时过渡开始,然后在效果完成之前指针就离开了元素。如果传出和传入的过渡都使用其指定的持续时间和计时函数执行,产生的影响可能因第二次过渡耗费了完整的指定时间来移动缩短的距离而显得突兀且不对称。相反,本规范使得第二次过渡更短。

上述规则引起此行为的机制涉及反向缩短因子反向调整后的起始值。特别地,每当反向缩短因子小于 1 时,就会出现反向行为。

请注意,这些规则并未完全解决涉及两个以上状态的过渡模式的问题。

请注意,这些规则导致使用新过渡的整个计时函数,而不是跳入计时函数的中间,这可能会产生令人不适的效果。

这是工作组考虑过的几种可能性之一。请参见演示其中一些可能性的反向演示,这导致了 2013 年 6 月 7 日做出的工作组决议以及 2013 年 11 月 11 日进行的修订。

4. 过渡的应用

当元素上的属性正在进行过渡时(即在过渡开始时或开始后,且在过渡的结束时间之前),该过渡会将一种称为当前值的样式添加到 [CSS3CASCADE] 中为 CSS 过渡定义的层级的 CSS 层叠中。

测试

请注意,这意味着 CSS 过渡产生的计算值可以像任何其他计算值一样继承给后代。在一般情况下,这意味着继承属性的过渡会按作者预期应用于后代元素。

当且仅当该属性当前未在同一元素上进行 CSS 动画([CSS3-ANIMATIONS])时,实现必须将此值添加到层叠中。

请注意,当同一元素和属性上的动画正在运行时,过渡不应用于层叠的这种行为,不会影响过渡是否开始或结束。公开过渡是否在运行的 API(例如 过渡事件)仍然会报告过渡正在运行。

如果当前时间在过渡的开始时间或之前(即在过渡的延迟阶段),当前值是一个将计算为过渡起始值的指定样式。

如果当前时间在过渡的开始时间之后(即在过渡的持续时间阶段),当前值是一个指定样式,其计算结果为使用以下值对该属性进行插值的结果:

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

5. 过渡的完成

运行中的过渡在等于或晚于其结束时间,但早于其结束时间之后的第一个样式变更事件的时间完成。当过渡完成时,实现必须将所有在该时间完成的过渡从运行中的过渡集合移动到已完成的过渡集合,然后触发这些完成事件。(注:如果不这样做,即在完成所有从运行中的过渡已完成的过渡的移动之前就触发部分事件,可能会导致样式变更事件在没有必要过渡完成的情况下发生,因为如果事件处理程序请求最新的计算样式或布局数据,触发该事件可能会导致样式变更事件。)

6. 过渡事件

CSS 过渡的创建、开始、完成和取消会生成相应的 DOM 事件。一个事件会被分派到在该元素上进行过渡的每个属性的元素上。这允许内容开发者执行与过渡变化同步的操作。

每个事件都提供与过渡关联的属性名称以及过渡的持续时间。

测试

6.1. 接口 TransitionEvent

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

6.1.1. IDL 定义

[Exposed=Window]
interface TransitionEvent : Event {
  constructor(CSSOMString type, optional TransitionEventInit transitionEventInitDict = {});
  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 属性名称。

注:这始终是某个长属性(longhand property)的名称。参见 transition-property 了解简写属性如何导致长属性发生过渡。

elapsedTime, 类型为 double,只读

此事件触发时过渡已运行的时间量(以秒为单位),不包括延迟阶段所花费的任何时间。此成员的计算方式随每个事件类型定义。

pseudoElement, 类型为 CSSOMString,只读

发生过渡的 CSS 伪元素名称(以两个冒号开头)(在这种情况下,事件的目标是该伪元素对应的元素),如果过渡发生在元素上,则为空字符串(这意味着事件的目标是该元素)。

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

6.2. TransitionEvent 的类型

可能发生的各种过渡事件类型为

transitionrun
transitionrun 事件在过渡被创建时(即添加到运行中的过渡集合时)发生。

负的 transition-delay 会导致事件触发,其 elapsedTime 等于延迟的绝对值,并限制在动画的 transition-duration 范围内。也就是说,已用时间等于 min(max(-transition-delay, 0), transition-duration)

  • 冒泡:是
  • 可取消:否
  • 上下文信息:propertyName, elapsedTime, pseudoElement
transitionstart
transitionstart 事件在过渡的延迟阶段结束时发生。

transitionstart 事件的 elapsedTime 值与 transitionrun 事件所使用的值相同。

  • 冒泡:是
  • 可取消:否
  • 上下文信息:propertyName, elapsedTime, pseudoElement
transitionend
transitionend 事件在过渡完成时发生。在过渡完成前被移除(例如,如果 transition-property 被移除)的情况下,事件将不会触发。

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

  • 冒泡:是
  • 可取消:否
  • 上下文信息:propertyName, elapsedTime, pseudoElement
测试
transitioncancel
transitioncancel 事件在过渡被取消时发生。

transitioncancel 事件的 elapsedTime 是从过渡延迟结束到过渡被取消时刻的秒数。如果过渡有负的 transition-delay,过渡的开始时刻即为实际触发过渡时刻之前 transition-delay 秒绝对值对应的时刻。或者,如果过渡有正的 transition-delay 且事件在过渡的延迟过期之前触发,elapsedTime 将为零。

  • 冒泡:是
  • 可取消:否
  • 上下文信息:propertyName, elapsedTime, pseudoElement
测试

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

以下是必须由所有 HTML 元素支持的事件处理程序(及其对应的事件处理程序事件类型),既作为事件处理程序内容属性,也作为事件处理程序 IDL 属性;并且必须由所有 DocumentWindow 对象支持,作为事件处理程序 IDL 属性

事件处理器 事件处理器事件类型
ontransitionrun transitionrun
ontransitionstart transitionstart
ontransitionend transitionend
ontransitioncancel transitioncancel

7. DOM 接口

本规范扩展了 HTML 中的 GlobalEventHandlers 接口混入(mixin),为过渡事件添加了事件处理程序 IDL 属性,定义见 § 6.3 元素、Document 对象和 Window 对象上的事件处理程序

7.1. IDL 定义

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

8. 安全考量

本节不具有规范性。

本规范的安全影响有限,因为它不允许 Web 内容执行以前无法执行的操作。相反,它允许以前可以用脚本执行的操作改为声明式执行,并且实现可以以某种方式进行优化(用于帧率和 CPU 使用率)。

实现可以进行的主要优化类别之一是在浏览器的合成线程或进程上运行某些高价值属性(如 transformopacity)的动画,而无需更新 Web 内容主线程上的样式或布局,除非需要最新的样式数据。这种优化通常需要分配图形内存来显示正在进行动画的元素的内容。实现应注意确保 Web 内容不能通过使用大量动画或覆盖大面积区域的动画(其中“大”可以根据变换前或变换后的大小来定义)触发不安全的内存不足处理。

9. 隐私考量

本节不具有规范性。

关于安全,本规范的隐私考虑有限,因为它不允许 Web 内容执行以前无法执行的操作。

本规范可能提供有助于确定用户硬件或软件特性的额外机制。然而,确定用户硬件或软件性能特征的能力对许多 Web 技术来说是共同的,且本规范并未引入新的能力。

§ 10 可访问性注意事项 所述,实现可能会提供缓解措施来帮助残障用户。这些缓解措施很可能被 Web 内容检测到,这意味着受益于这些缓解措施的用户可能会面临在向 Web 内容保持隐私与受益于缓解措施之间的权衡。

10. 可访问性注意事项

本节不具有规范性。

10.1. 运动

本规范为以前需要使用脚本完成的动画提供了声明式机制。提供声明式机制有多种影响:它使此类动画更易于制作,因此可能更常见,但它也使用户代理在满足用户可访问性需求时,更容易修改这些动画(如果需要)。

因此,对运动敏感的用户,或需要额外时间阅读或理解内容的用户,可能会受益于允许禁用或减慢动画的用户代理功能。(但关于此类缓解措施的隐私影响的信息,请参见 § 9 隐私注意事项。)

用户代理实现者应注意,Web 内容可能会依赖过渡事件的触发,因此此类缓解措施的实现可能希望触发过渡事件,即使过渡并未作为连续动画运行。然而,Web 内容依赖此类事件来正确运行通常被认为是不好的做法。

10.2. 层叠

CSS 层叠是 CSS 中的一种通用机制,允许用户需求与作者样式进行交互。本规范与层叠交互,但由于它仅允许在现有层叠规则产生的值之间进行动画,它不会干扰用户强制 CSS 属性具有特定值的能力。

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

11. 变更

11.1. 自 2018 年 10 月 11 日工作草案以来的变化

以下是自 2018 年 10 月 11 日工作草案 以来所做的实质性更改

有关这些更改的更多详细信息,请参阅版本控制更改日志

11.2. 早期变化

关于早期工作草案中的变化

  1. 请参阅 2018 年 10 月 11 日工作草案中的更改章节

  2. 请参阅 2017 年 11 月 30 日工作草案中的更改章节

  3. 请参阅 2013 年 11 月 19 日工作草案中的更改章节

  4. 请参阅 ChangeLog 获取以前工作草案中的变化。

  5. 有关这些更改的更多详细信息,请参阅版本控制更改日志,由于文件重命名,这些日志分为多个部分

12. 致谢

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

测试

与本规范后续级别相关的测试


一致性

文档约定

一致性要求通过描述性断言和 RFC 2119 术语相结合来表达。本文档规范性部分中的关键词“MUST”(必须)、“MUST NOT”(不得)、“REQUIRED”(必需)、“SHALL”(应)、“SHALL NOT”(不应)、“SHOULD”(推荐)、“SHOULD NOT”(不推荐)、“RECOMMENDED”(建议)、“MAY”(可以)和“OPTIONAL”(可选)应按照 RFC 2119 中的描述进行解释。然而,为了可读性,这些词在本文档中不以全大写形式出现。

本规范的所有文本均为规范性文本,明确标记为非规范性的部分、示例和注释除外。 [RFC2119]

本规范中的示例均以“例如”一词引入,或者通过 class="example" 与规范性文本隔开,如下所示

这是一个说明性示例。

说明性注释以“Note”一词开头,并使用 class="note" 与规范性文本隔开,如下所示

注意,这是一个说明性注释。

建议(Advisements)是规范性章节,旨在引起特别注意,并使用 <strong class="advisement"> 与其他规范性文本区分开来,如下所示: 用户代理必须提供可访问的替代方案。

测试

与本规范内容相关的测试可记录在“Tests”块中,就像这一个一样。任何此类块都是非规范性的。


一致性类别

本规范为三类一致性定义了一致性要求。

样式表
一份 CSS 样式表
渲染器
一种 用户代理 (UA),它解释样式表的语义并渲染使用它们的文档。
创作工具
一种 用户代理 (UA),用于编写样式表。

如果样式表包含的所有使用本模块定义语法的语句,根据通用 CSS 语法及本模块定义的各功能语法均有效,则该样式表符合本规范。

如果渲染器除了按相应规范解释样式表外,还通过正确解析本规范定义的所有功能并相应地渲染文档来支持这些功能,则该渲染器符合本规范。然而,由于设备限制导致 UA 无法正确渲染文档,并不意味着该 UA 不符合规范。(例如,UA 无需在单色显示器上渲染颜色。)

如果创作工具编写的样式表根据通用 CSS 语法及本模块中各功能的语法是句法正确的,并符合本模块中描述的所有其他样式表一致性要求,则该创作工具符合本规范。

部分实现

为了使作者能够利用前向兼容的解析规则来指定后备值,CSS 渲染器 **必须** 将其无法使用支持级别的任何 @规则、属性、属性值、关键字和其他语法结构视为无效(并 适当忽略)。特别地,用户代理 **不得** 在单一多值属性声明中选择性地忽略不支持的组件值而保留支持的值:如果任何值被视为无效(因为不支持的值必须如此),CSS 要求忽略整个声明。

不稳定和专有特性的实现

为了避免与未来稳定的 CSS 功能发生冲突,CSS 工作组建议在实施不稳定功能和私有扩展遵循最佳实践

非实验性实现

一旦规范达到候选推荐阶段,非实验性实现即可成为可能,实现者应发布他们能够证明根据规范正确实现的任何 CR 级别特性的无前缀实现。

为建立并保持 CSS 在不同实现间的互操作性,CSS 工作组请求非实验性的 CSS 渲染器在发布任何 CSS 功能的无前缀实现之前,向 W3C 提交一份实现报告(并在必要时提交用于该实现报告的测试用例)。提交给 W3C 的测试用例需经 CSS 工作组审阅和修正。

有关提交测试用例和实现报告的详细信息,请访问 CSS 工作组网站 https://w3org.cn/Style/CSS/Test/。问题可发送至 public-css-testsuite@w3.org 邮件列表。

索引

本规范定义的术语

通过引用定义的术语

引用

规范性引用

[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. 2022年1月13日. CR. URL: https://w3org.cn/TR/css-cascade-5/
[CSS-CASCADE-6]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS 级联与继承 Level 6. 2024 年 9 月 6 日. 工作草案 (WD). URL: https://w3org.cn/TR/css-cascade-6/
[CSS-COLOR-4]
Chris Lilley; Tab Atkins Jr.; Lea Verou. CSS 颜色模块 Level 4. 2025 年 4 月 24 日. CRD. URL: https://w3org.cn/TR/css-color-4/
[CSS-EASING-1]
Brian Birtles; Dean Jackson; Matt Rakow. CSS 缓动函数 1 级. 2023 年 2 月 13 日. CRD. URL: https://w3org.cn/TR/css-easing-1/
[CSS-EASING-2]
CSS 缓动函数 第2级。2024 年 8 月 29 日。FPWD。URL: https://w3org.cn/TR/css-easing-2/
[CSS-TRANSFORMS-1]
Simon Fraser; et al. CSS Transforms Module Level 1. 2019年2月14日. CR. URL: https://w3org.cn/TR/css-transforms-1/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS 值与单位模块 3 级 (CSS Values and Units Module Level 3). 2024年3月22日. CRD. URL: https://w3org.cn/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS 值与单位模块 4 级 (CSS Values and Units Module Level 4). 2024年3月12日. WD. URL: https://w3org.cn/TR/css-values-4/
[CSS2]
Bert Bos; et al. 层叠样式表 2 级修订版 1 (CSS 2.1) 规范 (Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification). 2011年6月7日. REC. URL: https://w3org.cn/TR/CSS2/
[CSS3-ANIMATIONS]
David Baron; et al. CSS Animations Level 1. 2023年3月2日. WD. URL: https://w3org.cn/TR/css-animations-1/
[CSS3CASCADE]
Elika Etemad; Tab Atkins Jr.. CSS 层叠和继承第 3 级. 2021 年 2 月 11 日. REC. URL: https://w3org.cn/TR/css-cascade-3/
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). 2021年8月26日. WD. URL: https://w3org.cn/TR/cssom-1/
[DOM]
Anne van Kesteren. DOM 标准. Living Standard. URL: https://dom.spec.whatwg.org/
[HTML]
Anne van Kesteren; et al. HTML 标准. Living Standard. URL: https://html.whatwg.cn/multipage/
[RFC2119]
S. Bradner. RFC 中用于指示要求级别的关键词. 1997年3月. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[WEB-ANIMATIONS-1]
Brian Birtles; 等人. Web Animations. 2023年6月5日. WD. URL: https://w3org.cn/TR/web-animations-1/
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL 标准. Living Standard. URL: https://webidl.spec.whatwg.org/

参考资料

[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper. CSS 背景与边框模块 3 级 (CSS Backgrounds and Borders Module Level 3). 2024年3月11日. CRD. URL: https://w3org.cn/TR/css-backgrounds-3/
[SMIL-ANIMATION]
Patrick Schmitz; Aaron Cohen. SMIL 动画. 2001 年 9 月 4 日. REC. URL: https://w3org.cn/TR/smil-animation/
[SVG11]
Erik Dahlström; et al. 可缩放矢量图形 (SVG) 1.1 (第二版). 2011 年 8 月 16 日. REC. URL: https://w3org.cn/TR/SVG11/
[WCAG20]
Ben Caldwell; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 2008年12月11日. REC. URL: https://w3org.cn/TR/WCAG20/

属性索引

名称初始值应用于继承百分比动画类型 (Animation type)规范顺序计算值
transition <single-transition>#见各个属性所有元素不适用不可动画按语法见各个属性
transition-delay <time>#0s所有元素不适用不可动画按语法列表,每一项为一个持续时间
transition-duration <time [0s,∞]>#0s所有元素不适用不可动画按语法列表,每一项为一个持续时间
transition-property none | <single-transition-property>#all所有元素不适用不可动画按语法关键字 none 或标识符列表
transition-timing-function <easing-function>#ease所有元素不适用不可动画按语法按指定值

IDL 索引

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

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

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