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速记的顺序如下......

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

^{致谢:Mozilla开发者网络}

所以,你在animation-delay属性之后定义,因此,animation将延迟重置为0

Demo (不会工作)

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

注意:我已将定时器最小化为3秒延迟,以便您可以更快地看到效果.

建议:在声明标准属性之前,始终声明前缀属性,而不是像写一样

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

养成写这些属性的习惯

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