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