CSS属性参考 | animation-delay

03-15 次

标签 css教程 css属性 animation-delay

CSS animation-delay属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。

你可以指定多个animation-delay值，各个值之间使用都好来分隔。当你设置了多个animation-delay值的时候，与animation相关的其它属性通常也要设置相同个数的值，如animation-name、animation-direction、animation-timing-function等属性。

这些值是一一对应的关系，例如，如果提供了2个animation-delay的值，那么第一个值决定animation-name属性中的第一个动画的延迟时间，第二个值决定animation-name属性中第二个动画的延迟时间。

官方语法

animation-delay: <time>

animation-delay属性的默认值为0秒。time参数定义从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(m)和毫秒(ms)。如果未设置单位，定义无效。

示例代码：

.element {
    animation-name: bounce, shake;
    animation-duration: 2s, 1s;
    animation-delay: 1s, 0s;
    animation-timing-function: linear, ease-in;
    /* ... */
}

这个例子中定义了2个动画，分别为bounce和shake，它们的延迟时间分别为1秒和0秒。