css3 animation-delay属性设置css动画的延迟时间

css3 animation-delay属性

css3 animation-delay属性可以设置css动画的延迟时间，它可以控制动画什么时候开始，以及多次循环动画之间的间隔时间。

使用方法

使用css3 animation-delay属性时，需要在animation-name属性和animation-duration属性之后添加animation-delay属性，它的值可以是一个数字，单位可以是秒（s）或毫秒（ms）。

.box {
    animation-name: myAnimation;
    animation-duration: 3s;
    animation-delay: 2s;
}

如果想要让动画重复播放，可以使用animation-iteration-count属性来设置循环次数，如果想要在动画循环之间设置间隔时间，可以使用animation-delay属性来设置。

.box {
    animation-name: myAnimation;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-iteration-count: 3;
}

如果想要在每次动画循环之间设置不同的间隔时间，可以使用animation-delay属性的复合值，它的值可以是一个逗号分隔的列表，每个值都会在每次动画循环之间设置一个不同的间隔时间。

.box {
    animation-name: myAnimation;
    animation-duration: 3s;
    animation-delay: 2s, 5s, 8s;
    animation-iteration-count: 3;
}

css3 animation-delay属性还可以设置关键帧动画的延迟时间，只需要在关键帧动画的@keyframes规则中添加animation-delay属性即可。

@keyframes myAnimation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
    animation-delay: 2s;
}

css3 animation-delay属性可以用来设置css动画的延迟时间，它可以控制动画什么时候开始，以及多次循环动画之间的间隔时间，使用起来非常方便。