1. 引言
本节不具有规范性。
本文件引入了新的 CSS 功能以启用隐式过渡,描述了 CSS 属性如何能够在给定的持续时间内从一个值平滑地变化到另一个值。
测试
崩溃测试
- delete-image-set.html (实时测试) (源码)
- size-container-transition-crash.html (实时测试) (源码)
- transition-during-style-attr-mutation.html (实时测试) (源码)
- transition-large-word-spacing-001.html (实时测试) (源码)
1.1. 值定义
本规范遵循 [CSS2] 中的 CSS 属性定义约定,并使用 [CSS-VALUES-3] 中的 值定义语法。本规范中未定义的值类型在 CSS Values & Units [CSS-VALUES-3] 中定义。与其他 CSS 模块的组合可能会扩展这些值类型的定义。
除了定义中列出的属性特定值外,本规范中定义的所有属性也都接受 CSS 全局关键字 作为其属性值。为了可读性,未明确重复列出。
2. 过渡(Transitions)
通常,当 CSS 属性值发生变化时,渲染结果会立即更新,受影响的元素会立即从旧属性值变为新属性值。本节描述了一种使用新的 CSS 属性指定渐进式过渡的方法。这些属性用于随时间推移从旧状态平滑地动画化到新状态。
例如,假设已经在 left 和 background-color 属性上定义了 1 秒的过渡。下图展示了在元素上更新这些属性的效果,在本例中是将其向右移动并将背景从红色变为蓝色。这假设其他过渡参数仍保持默认值。
过渡是一种呈现效果。属性的 计算值(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])。
测试
- animate-with-color-mix.html (实时测试) (源码)
- color-transition-premultiplied.html (实时测试) (源码)
- text-shadow-composition.html (实时测试) (源码)
- text-shadow-interpolation.html (实时测试) (源码)
- vertical-align-composition.html (实时测试) (源码)
- vertical-align-interpolation.html (实时测试) (源码)
- z-index-interpolation.html (实时测试) (源码)
- idlharness.html (实时测试) (源码)
- inherit-background-color-transition.html (实时测试) (源码)
- inheritance.html (实时测试) (源码)
- properties-value-001.html (实时测试) (源码)
- properties-value-002.html (实时测试) (源码)
- properties-value-003.html (实时测试) (源码)
- properties-value-implicit-001.html (实时测试) (源码)
- retargetted-transition-with-box-sizing.html (实时测试) (源码)
- shadow-root-insertion.html (实时测试) (源码)
- transition-base-response-001.html (实时测试) (源码)
- transition-base-response-002.html (实时测试) (源码)
- transition-base-response-003.html (实时测试) (源码)
- transition-in-iframe-001.html (实时测试) (源码)
2.1. transition-property 属性
transition-property 属性指定应用过渡的 CSS 属性名称。
| 名称 | transition-property |
|---|---|
| 值 | none | <single-transition-property># |
| 初始值 | all |
| 应用于 | 所有元素 |
| 可继承 | 否 |
| 百分比 | 不适用 |
| 计算值 | 关键字 none,否则为标识符列表 |
| 规范顺序 | 按语法 |
| 动画类型 | 不可动画 |
测试
- move-after-transition.html (实时测试) (源码)
- transition-end-event-shorthands.html (实时测试) (源码)
- transition-property-computed.html (实时测试) (源码)
- transition-property-invalid.html (实时测试) (源码)
- transition-property-valid.html (实时测试) (源码)
- pseudo-element-transform.html (实时测试) (源码)
- pseudo-elements-001.html (实时测试) (源码)
- pseudo-elements-002.html (实时测试) (源码)
- transition-background-position-with-edge-offset.html (实时测试) (源码)
- transition-property-001.html (实时测试) (源码)
- transition-property-002.html (实时测试) (源码)
- transition-property-003-manual.html (手动测试) (源码)
- transition-property-004-manual.html (手动测试) (源码)
- transition-property-005-manual.html (手动测试) (源码)
- transition-property-006-manual.html (手动测试) (源码)
- transition-property-007-manual.html (手动测试) (源码)
- transition-property-008-manual.html (手动测试) (源码)
- transition-property-009-manual.html (手动测试) (源码)
- transition-property-010-manual.html (手动测试) (源码)
- transition-property-011-manual.html (手动测试) (源码)
- transition-property-012-manual.html (手动测试) (源码)
- transition-property-013-manual.html (手动测试) (源码)
- transition-property-014-manual.html (手动测试) (源码)
- transition-property-015-manual.html (手动测试) (源码)
- transition-property-016-manual.html (手动测试) (源码)
- transition-property-017-manual.html (手动测试) (源码)
- transition-property-018-manual.html (手动测试) (源码)
- transition-property-019-manual.html (手动测试) (源码)
- transition-property-020-manual.html (手动测试) (源码)
- transition-property-021-manual.html (手动测试) (源码)
- transition-property-022-manual.html (手动测试) (源码)
- transition-property-023-manual.html (手动测试) (源码)
- transition-property-024-manual.html (手动测试) (源码)
- transition-property-025-manual.html (手动测试) (源码)
- transition-property-026-manual.html (手动测试) (源码)
- transition-property-027-manual.html (手动测试) (源码)
- transition-property-028-manual.html (手动测试) (源码)
- transition-property-029-manual.html (手动测试) (源码)
- transition-property-030-manual.html (手动测试) (源码)
- transition-property-031-manual.html (手动测试) (源码)
- transition-property-032-manual.html (手动测试) (源码)
- transition-property-033-manual.html (手动测试) (源码)
- transition-property-034-manual.html (手动测试) (源码)
- transition-property-035-manual.html (手动测试) (源码)
- transition-property-036-manual.html (手动测试) (源码)
- transition-property-037-manual.html (手动测试) (源码)
- transition-property-038-manual.html (手动测试) (源码)
- transition-property-039-manual.html (手动测试) (源码)
- transition-property-040-manual.html (手动测试) (源码)
- transition-property-041-manual.html (手动测试) (源码)
- transition-property-042-manual.html (手动测试) (源码)
- transition-property-043-manual.html (手动测试) (源码)
- transition-property-044-manual.html (手动测试) (源码)
- transition-property-045-manual.html (手动测试) (源码)
- transition-test.html (实时测试) (源码)
- transition-zero-duration-with-delay.html (实时测试) (源码)
值 none 表示没有属性将发生过渡。否则,给出一个要进行过渡的属性列表,或者关键字 all,表示所有属性都将进行过渡。
如果所列的标识符之一不是公认的属性名称,实现仍然必须在列表中的可动画化属性上开始过渡,并使用其在 transition-duration、transition-delay 和 transition-timing-function 列表各自索引处的持续时间、延迟和定时函数。换句话说,必须保留未识别的属性在列表中以保持索引的匹配。
<custom-ident> 在 <single-transition-property> 中的产生式除了排除 <custom-ident> 中总是排除的关键字外,还排除了关键字 none。这意味着在包含多个标识符的列表中,none、inherit 和 initial 不被允许作为其中的项目;任何使用它们的列表在语法上都是无效的。
对于关键字 all,或者如果所列的标识符之一是简写属性,实现必须为其所有长手属性子项(对于 all,则为所有属性)启动过渡,并使用对应于该简写属性索引处的持续时间、延迟和定时函数。
如果在 transition-property 的值中多次指定了某个属性(无论是单独指定、通过包含它的简写属性指定,还是通过 all 值指定),那么启动的过渡将使用 transition-property 值中对应于调用动画化该属性的最后一个项目的索引处的持续时间、延迟和定时函数。
注:all 值和 all 简写属性的工作方式类似,因此 all 值就像一个涵盖所有属性的简写。
2.2. transition-duration 属性
transition-duration 属性定义过渡所花费的时间长度。
| 名称 | transition-duration |
|---|---|
| 值 | <time [0s,∞]># |
| 初始值 | 0s |
| 应用于 | 所有元素 |
| 可继承 | 否 |
| 百分比 | 不适用 |
| 计算值 | 列表,每一项为一个持续时间 |
| 规范顺序 | 按语法 |
| 动画类型 | 不可动画 |
测试
- infinite-duration-crash.html (实时测试) (源码)
- transition-duration-computed.html (实时测试) (源码)
- transition-duration-invalid.html (实时测试) (源码)
- transition-duration-valid.html (实时测试) (源码)
- transition-duration-001.html (实时测试) (源码)
- transition-duration-002-manual.html (手动测试) (源码)
- transition-duration-003-manual.html (手动测试) (源码)
- transition-duration-004-manual.html (手动测试) (源码)
- transition-duration-shorthand.html (实时测试) (源码)
此属性指定旧值到新值的过渡应花费多长时间。默认值为 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 |
| 应用于 | 所有元素 |
| 可继承 | 否 |
| 百分比 | 不适用 |
| 计算值 | 按指定值 |
| 规范顺序 | 按语法 |
| 动画类型 | 不可动画 |
测试
- transition-timing-function.html (实时测试) (源码)
- transition-timing-function-computed.html (实时测试) (源码)
- transition-timing-function-invalid.html (实时测试) (源码)
- transition-timing-function-valid.html (实时测试) (源码)
- transition-timing-function-002-manual.html (手动测试) (源码)
- transition-timing-function-003-manual.html (手动测试) (源码)
- transition-timing-function-004-manual.html (手动测试) (源码)
- transition-timing-function-005-manual.html (手动测试) (源码)
- transition-timing-function-006-manual.html (手动测试) (源码)
- transition-timing-function-010-manual.html (手动测试) (源码)
2.4. transition-delay 属性
transition-delay 属性定义过渡何时开始。它允许过渡在应用后经过一段时间再开始执行。transition-delay 值为 0s 意味着过渡将在属性更改时立即执行。否则,该值指定从属性更改那一刻起的偏移量,并且过渡将延迟该偏移量执行。
如果 transition-delay 的值是负的时间偏移量,则过渡将在属性更改时立即执行,但看起来会在指定的偏移量处开始。也就是说,过渡看起来会在其播放周期的中途开始。在过渡具有隐式起始值且 transition-delay 为负值的情况下,起始值取自属性更改的那一刻。
| 名称 | transition-delay |
|---|---|
| 值 | <time># |
| 初始值 | 0s |
| 应用于 | 所有元素 |
| 可继承 | 否 |
| 百分比 | 不适用 |
| 计算值 | 列表,每一项为一个持续时间 |
| 规范顺序 | 按语法 |
| 动画类型 | 不可动画 |
测试
- transition-delay-computed.html (实时测试) (源码)
- transition-delay-invalid.html (实时测试) (源码)
- transition-delay-valid.html (实时测试) (源码)
- transition-delay-000-manual.html (手动测试) (源码)
- transition-delay-001.html (实时测试) (源码)
- transition-delay-002-manual.html (手动测试) (源码)
- transition-delay-003-manual.html (手动测试) (源码)
2.5. transition 简写属性
transition 简写属性将上述四个属性合并为一个单一属性。
| 名称 | transition |
|---|---|
| 值 | <single-transition># |
| 初始值 | 见各个属性 |
| 应用于 | 所有元素 |
| 可继承 | 否 |
| 百分比 | 不适用 |
| 计算值 | 见各个属性 |
| 动画类型 | 不可动画 |
| 规范顺序 | 按语法 |
测试
请注意,此属性中的项目顺序很重要:第一个可以解析为时间的值会被分配给 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-duration、transition-delay 和 transition-timing-function 值中的 匹配过渡持续时间、匹配过渡延迟 和 匹配过渡定时函数(参见 列表匹配规则)。定义过渡的 组合持续时间(combined duration) 为 匹配过渡持续时间(与 0s 取最大值)和 匹配过渡延迟 之和。
在比较给定属性的 变化前样式 和 变化后样式 时,如果属性值的 动画类型 既 不是 不可动画化(not animatable) 也 不是 离散(discrete) 的,则它们是 可过渡的(transitionable)。
注意: 即使一个 属性 被定义为具有 非 离散 的 动画类型,对于特定的一对 属性值,其 动画类型 也可能是 离散 的。例如,box-shadow 属性的 动画类型 是 阴影列表(shadow list),其定义了当 inset 关键字在一个值中缺失而在另一个值中存在时,使用 离散 动画。因此,0px 0px black 和 inset 10px 10px black 不是 可过渡的。
对于每个元素和属性,实现必须执行以下操作
- 如果以下所有条件均为真
- 该元素没有该属性的 正在运行的过渡,
- 变化前样式 与 变化后样式 对于该属性不同,且该属性的值是 可过渡的,
- 该元素没有该属性的 已完成的过渡,或者该 已完成的过渡 的 结束值 与该属性的 变化后样式 不同,
- 存在一个 匹配的 transition-property 值,并且
- 组合持续时间 大于 0s,
- 否则,如果该元素具有该属性的 已完成的过渡,且该 已完成的过渡 的 结束值 与该属性的 变化后样式 不同,则实现必须从 已完成的过渡 集合中移除该 已完成的过渡。
- 如果元素对该属性存在运行中的过渡或已完成的过渡,且没有匹配的 transition-property 值,则实现必须取消该运行中的过渡,或者从已完成的过渡集合中移除该已完成的过渡。
- 如果元素对该属性存在运行中的过渡,且存在一个匹配的 transition-property 值,并且运行中的过渡的结束值不等于变更后样式中该属性的值,则
- 如果运行中的过渡中该属性的当前值等于变更后样式中该属性的值,或者这两个值不可过渡,则实现必须取消该运行中的过渡。
- 否则,如果组合持续时间小于或等于 0s,或者运行中的过渡中该属性的当前值无法与变更后样式中该属性的值进行过渡,则实现必须取消该运行中的过渡。
- 否则,如果运行中的过渡的反向调整后的起始值与变更后样式中该属性的值相同 (参见关于过渡反向的章节了解为何存在此种情况),实现必须取消该运行中的过渡并启动一个新的过渡,其
- 反向调整后的起始值即为运行中的过渡的结束值(注:这代表过渡的逻辑起始状态,允许某些计算忽略过渡是在该状态达到之前就开始的事实,从而使得同一过渡的重复反向能够正确工作),
- 反向缩短因子为以下两项之和的绝对值(并限制在 [0, 1] 范围内): 注:这代表了旧过渡已遍历的反向调整后的起始值与结束值之间的空间部分(以值的量而非时间计),但使用绝对值和区间限制来处理 y1 或 y2 超出 [0, 1] 范围的计时函数。
-
开始时间为样式变更事件的时间加上
- 如果匹配的 transition-delay 为非负数,则使用该匹配的 transition-delay,或者
- 如果匹配的 transition-delay 为负数,则使用新过渡的反向缩短因子与匹配的 transition-delay 的乘积,
- 结束时间为开始时间加上匹配的 transition-duration 与新过渡的反向缩短因子的乘积,
- 起始值为运行中的过渡中该属性的当前值,
- 结束值为变更后样式中该属性的值,
- 否则,实现必须取消该运行中的过渡并启动一个新的过渡,其
请注意,上述规则意味着当可动画属性的计算值发生变化时,启动的过渡取决于该属性首次获得新计算值时 transition-property、transition-duration、transition-timing-function 和 transition-delay 属性的值。这意味着当这些 transition-* 属性之一与可能发生过渡的属性同时发生变化时,是这些 transition-* 属性的新值在控制该过渡。
这为作者提供了一种在两个状态之间切换时,为“向前”和“向后”过渡指定不同 transition-* 属性值的方法(但关于不完整过渡被中断时的特殊反向行为,请参见下方)。作者可以在指定触发过渡值的同一规则中指定 transition-duration、transition-timing-function 或 transition-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-duration 为 2s,因此从 blue 到 green 的过渡耗时 2 秒。然而,当列表项离开 :hover 状态时,从 green 到 blue 的过渡耗时 1 秒。
请注意,一旦属性的过渡已经开始(包括处于其延迟阶段),它就会根据原始的计时函数、持续时间和延迟继续运行,即使 transition-timing-function、transition-duration 或 transition-delay 属性在过渡完成之前发生了变化。但是,如果 transition-property 属性发生变化,导致过渡本不会开始,则过渡停止(且该属性立即变为其最终值)。
请注意,上述规则意味着当属性的计算值因声明式动画(相对于脚本化动画)而发生变化时,过渡不会启动。发生这种情况是因为变更前样式包含了声明式动画的最新样式。
测试
- before-load-001.html (在线测试) (源码)
- changing-while-transition-001.html (在线测试) (源码)
- changing-while-transition-002.html (在线测试) (源码)
- changing-while-transition-003.html (在线测试) (源码)
- changing-while-transition-004.html (在线测试) (源码)
- currentcolor-animation-001.html (在线测试) (源码)
- disconnected-element-001.html (在线测试) (源码)
- dynamic-root-element.html (在线测试) (源码)
- historical.html (在线测试) (源码)
- inherit-height-transition.html (在线测试) (源码)
- non-rendered-element-001.html (在线测试) (源码)
- non-rendered-element-002.html (在线测试) (源码)
- properties-value-inherit-001.html (在线测试) (源码)
- properties-value-inherit-002.html (在线测试) (源码)
- properties-value-inherit-003.html (在线测试) (源码)
- starting-of-transitions-001.html (在线测试) (源码)
- root-color-transition.html (在线测试) (源码)
- transition-after-animation-001.html (在线测试) (源码)
- transition-remove-and-change-immediate.html (在线测试) (源码)
- transition-reparented.html (在线测试) (源码)
- transitions-retarget.html (在线测试) (源码)
- zero-duration-multiple-transition.html (在线测试) (源码)
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 = 0.0;elapsedTime CSSOMString = ""; };pseudoElement
6.1.2. 属性
propertyName, 类型为 CSSOMString,只读-
与过渡关联的 CSS 属性名称。
注:这始终是某个长属性(longhand property)的名称。参见 transition-property 了解简写属性如何导致长属性发生过渡。
elapsedTime, 类型为 double,只读-
此事件触发时过渡已运行的时间量(以秒为单位),不包括延迟阶段所花费的任何时间。此成员的计算方式随每个事件类型定义。
pseudoElement, 类型为 CSSOMString,只读-
发生过渡的 CSS 伪元素名称(以两个冒号开头)(在这种情况下,事件的目标是该伪元素对应的元素),如果过渡发生在元素上,则为空字符串(这意味着事件的目标是该元素)。
是一个事件构造函数。TransitionEvent(type, transitionEventInitDict)
6.2. TransitionEvent 的类型
可能发生的各种过渡事件类型为
transitionruntransitionrun事件在过渡被创建时(即添加到运行中的过渡集合时)发生。负的 transition-delay 会导致事件触发,其
elapsedTime等于延迟的绝对值,并限制在动画的 transition-duration 范围内。也就是说,已用时间等于min(max(-transition-delay, 0), transition-duration)。- 冒泡:是
- 可取消:否
- 上下文信息:propertyName, elapsedTime, pseudoElement
transitionstarttransitionstart事件在过渡的延迟阶段结束时发生。transitionstart事件的elapsedTime值与transitionrun事件所使用的值相同。- 冒泡:是
- 可取消:否
- 上下文信息:propertyName, elapsedTime, pseudoElement
transitionendtransitionend事件在过渡完成时发生。在过渡完成前被移除(例如,如果 transition-property 被移除)的情况下,事件将不会触发。此事件的
elapsedTime值等于 transition-duration 的值。- 冒泡:是
- 可取消:否
- 上下文信息:propertyName, elapsedTime, pseudoElement
transitioncanceltransitioncancel事件在过渡被取消时发生。transitioncancel事件的elapsedTime是从过渡延迟结束到过渡被取消时刻的秒数。如果过渡有负的 transition-delay,过渡的开始时刻即为实际触发过渡时刻之前 transition-delay 秒绝对值对应的时刻。或者,如果过渡有正的 transition-delay 且事件在过渡的延迟过期之前触发,elapsedTime将为零。- 冒泡:是
- 可取消:否
- 上下文信息:propertyName, elapsedTime, pseudoElement
6.3. 元素、Document 对象和 Window 对象上的事件处理程序
以下是必须由所有 HTML 元素支持的事件处理程序(及其对应的事件处理程序事件类型),既作为事件处理程序内容属性,也作为事件处理程序 IDL 属性;并且必须由所有 Document 和 Window 对象支持,作为事件处理程序 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 使用率)。
实现可以进行的主要优化类别之一是在浏览器的合成线程或进程上运行某些高价值属性(如 transform 和 opacity)的动画,而无需更新 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 日工作草案 以来所做的实质性更改
-
明确了
GlobalEventHandlers是一个混入(mixin)。 -
将已废弃的
<timing-function>替换为 <easing-function>。 -
向
transitionEventInitDict字典添加了默认值。 -
从 <single-transition-property> 语法中删除了尾随分号。
-
将事件定义与它们的
GlobalEventHandlers容器关联起来。 -
向属性值添加了范围定义标注。
-
添加了 Web 平台测试覆盖。
-
细微的编辑修订和改进。
有关这些更改的更多详细信息,请参阅版本控制更改日志。
11.2. 早期变化
关于早期工作草案中的变化
-
请参阅 ChangeLog 获取以前工作草案中的变化。
-
有关这些更改的更多详细信息,请参阅版本控制更改日志,由于文件重命名,这些日志分为多个部分
12. 致谢
特别感谢来自 Tab Atkins、Carine Bournez、Aryeh Gregor、Vincent Hardy、Anne van Kesteren、Cameron McCormack、Alex Mogilevsky、Jasper St. Pierre、Estelle Weyl 以及其他所有 www-style 社区成员的反馈。
测试
与本规范后续级别相关的测试
- allow-discrete-auto-inset.html (在线测试) (源码)
- custom-property-and-allow-discrete.html (在线测试) (源码)
- display-none-no-animations.html (在线测试) (源码)
- idlharness-2.html (在线测试) (源码)
- inert-while-transitioning-to-display-none.html (在线测试) (源码)
- starting-style-parsing.html (在线测试) (源码)
- transition-behavior.html (在线测试) (源码)
- starting-style-adjustment.html (在线测试) (源码)
- starting-style-cascade.html (在线测试) (源码)
- starting-style-first-letter-crash.html (在线测试) (源码)
- starting-style-name-defining-rules.html (在线测试) (源码)
- starting-style-rule-basic.html (在线测试) (源码)
- starting-style-rule-none.html (在线测试) (源码)
- starting-style-rule-pseudo-elements.html (在线测试) (源码)
- starting-style-size-container.html (在线测试) (源码)
- transition-behavior.html (在线测试) (源码)
- transition-behavior-events.html (在线测试) (源码)