CSS animation-delay 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

animation-delay是 CSS 动画属性之一，用于指定动画何时开始。

animation-delay属性值可以是秒(s)或毫秒(ms)为单位的值，默认值为0s(立即开始动画)。

animation-delay属性值允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

常用的实例

接下来通过多个实例演示animation-delay属性的用法，来深化您对animation-delay属性的理解。

实例代码运行代码

复制

/* 延迟1秒后开始动画 */
.element {
    animation-delay: 1s;
}

/* 延迟500毫秒后开始动画 */
.element {
    animation-delay: 500ms;
}

/* 负值延迟，动画立即开始但从中间开始播放 */
.element {
    animation-delay: -2s;
}

/* 多动画延迟设置 */
.element {
    animation-name: slide, fade;
    animation-delay: 0s, 1s; /* slide立即开始，fade延迟1秒 */
}