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。< / SUP>}

^{致谢：Mozilla Developer Network}

---

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

Demo （无法工作）

Demo 2 （切换定义属性的顺序）

  

注意：我已将计时器最小化为3秒延迟，以便您可以看到   效果更快。

---

建议：在声明标准属性之前始终声明前缀属性，所以不要像

那样写

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

养成写

等属性的习惯

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