CSS3 - 动画延迟不起作用

Question

我这里有一个简单的 CSS3 动画。

#FadeIn3 {
    animation-delay: 20s;
    -webkit-animation-delay: 20s;
    animation: FadeIn 3s;
    -webkit-animation: FadeIn 3s;
}

我想我不必链接动画本身，因为它工作得很好。

另外，HTML 没问题，除了 animation-delay 之外一切正常。

Answer 1

顺序有误，需要下animation-delay在 animation 之后这是速记属性，因此它会重置延迟计时器。

animation的顺序速记如下……

^{顺序在每个动画定义中都很重要:可以解析为 <time> 的第一个值分配给 animation-duration , 第二个分配给 animation-delay .}

^{致谢:Mozilla Developer Network}

---

因此，您在 animation-delay 之后定义它属性(property)，因此，animation将延迟重置为 0

Demo (不会工作)

Demo 2 (调换了属性定义的顺序)

Note: I've minimized the timer to 3s delay so that you can see the effect faster.

---

建议:总是在声明标准属性之前声明带前缀的属性，所以不要这样写

animation-delay: 20s;
-webkit-animation-delay: 20s;

有这样写属性的习惯

-webkit-animation-delay: 20s;
animation-delay: 20s;