css - 浏览器如何匹配 css 子属性

Question

如文档所述，我们可以在 CSS3 中定义动画，例如

.class1{
    animation: name duration timing-function delay iteration-count direction play-state
}

我想知道我是否为名称、持续时间、计时功能等每个属性都赋予了值，而不是延迟，那么浏览器如何理解我已经跳过了延迟属性。

那么如果我已经为动画属性提供了所有相应的值，那么它与属性和值是 1:1 匹配的，但是如果想跳过任何中间属性，例如

.class1 {
    animation: anim 2s cubic-bezier(0 0 1 1) 2 alternate running
}

这里我已经跳过了delay所以浏览器如何知道我已经跳过了delay属性而不是其他属性。

Answer 1

W3C 官方草案非常粗略，您不会得到一个好的“官方”答案。基本上浏览器会尝试按照规范顺序解析每个值，跳过那些与属性中对应值不匹配的子animation属性；所以它首先看到第一个值是有效的animation-name，然后是第二个是有效的animation-duration，然后继续直到它到达那个不是有效值的值2，所以它跳过并检查它是否是有效的，这这是。animation-delayanimation-delayanimation-iteration-count