动画性 CSS 属性

CSS 动画和过渡依赖于动画性属性这一概念，且所有 CSS 属性除非另有规定否则均有动画性。每个属性的动画类型决定了此属性的值如何结合——插值、相加或累积。过渡仅涉及插值，而动画可能使用所有三种结合方法。

备注： 每个 CSS 属性的动画类型列于其“形式定义”表格中（如 color）。

备注： 每个 CSS 数据类型的插值方法描述于其“插值”一节中（如 <length>）。

动画类型

在 Web 动画规范中主要定义了四种动画类型：

无动画性

此属性无动画性。此属性在列于动画关键帧中时不被处理，且不受过渡影响。

备注： 仅针对无动画性属性的动画效果仍将表现出动画效果的通常行为（如触发 animationstart 事件）。

离散

此属性的值不可加，且插值在 50% 处从开始值换为结束值。具体而言，记 p 为进度值：

  • 若 p < 0.5，则 V_结果 = V_开始；
  • 若 p ≥ 0.5，则 V_结果 = V_结束。
按计算值

计算值对应的各个分量使用其值类型所标示的流程相结合。若分量数量或对应分量的类型不符，或有任意分量值使用离散动画且两个对应值不符，则属性值按离散相结合。

可重复列表

与按计算值相同，但若两个列表有不同数量的元素，则先将两个列表重复至元素数量的最小公倍数，再将每个元素按计算值相结合。若某对值无法结合或有任意分量值使用离散动画，则属性值按离散相结合。

某些属性具有未被这四种类型所涵盖的特定的插值行为。在此情形下，请参照此属性的“插值”一节（如 visibility）。

为自定义属性赋予动画

对于使用 registerProperty() (en-US) 方法所注册的自定义属性，其动画类型为按计算值，且其计算值类型由此属性的语法定义所决定。

对于未注册的自定义属性，其动画类型为离散。

参见