可动画的 CSS 属性
CSS 动画 和 过渡 依赖于 **可动画** 属性的概念,所有 CSS 属性都是可动画的,除非另有说明。每个属性的 *动画类型* 决定了值如何 组合 - 插值、添加或累积 - 对于此属性。过渡仅涉及插值,而动画可以使用所有三种组合方法。
**注意:**每个 CSS 属性的动画类型在其“正式定义”表中列出(例如,color
)。
**注意:**每个 CSS 数据类型的插值方法在其“插值”部分中描述(例如,<length>
)。
动画类型
在 Web 动画 规范中定义了四种主要动画类型
- 不可动画
-
该属性不可动画。它在动画关键帧中列出时不会被处理,并且不受过渡的影响。
**注意:**仅针对不可动画属性的动画效果仍然会表现出动画效果的正常行为(例如,触发
animationstart
事件)。 - 离散
-
该属性的值不是累加的,插值在
50%
时从起始值切换到结束值。具体来说,用p
表示进度值- 如果
p < 0.5
,则V_result = V_start
; - 如果
p ≥ 0.5
,则V_result = V_end
。
- 如果
- 按计算值
-
使用为该值类型指示的过程组合计算值的对应各个组件。如果组件数量或对应组件的类型不匹配,或者任何组件值使用离散动画且两个对应值不匹配,则属性值将作为离散值组合。
- 可重复列表
-
与按计算值相同,除了如果两个列表具有不同的项目数量,它们首先会重复到最小的公倍数项目数量。然后,每个项目按计算值组合。如果一对值无法组合,或者任何组件值使用离散动画,则属性值将作为离散值组合。
某些属性具有这些四种类型未涵盖的特定插值行为。在这种情况下,请参阅属性的“插值”部分(例如,visibility
)。
动画自定义属性
对于使用 registerProperty()
方法注册的自定义属性,动画类型由计算值决定,计算值类型由属性的语法定义确定。
对于未注册的自定义属性,动画类型为离散型。