css animation-delay属性有哪些实用使用技巧

CSS的animation-delay属性用于定义动画在应用后到开始执行之间的等待时间，合理运用这个属性可以让我们实现更复杂的动画时序效果，满足不同的页面交互需求。

animation-delay基础语法

animation-delay是CSS动画模块的常用属性，其基础语法格式如下：

/* 单个值：所有动画延迟2秒执行 */
animation-delay: 2s;

/* 多个值：对应多个动画的延迟时间 */
animation-delay: 1s, 3s;

属性值支持的时间单位包括秒（s）和毫秒（ms），1s等于1000ms，默认值为0，表示动画应用后立即执行。当给元素设置多个动画时，animation-delay的值会按顺序对应每一个动画，数量不匹配时遵循CSS动画的多值分配规则。

实用使用技巧

1. 使用负值实现动画中途启动

很多开发者不知道animation-delay支持负值，负值表示动画已经执行了对应时长的进度，应用后会直接从该进度开始播放，非常适合需要动画不是从初始状态启动的场景。

/* 动画总时长4s，延迟-2s表示直接从第2秒的状态开始播放 */
.box {
    width: 100px;
    height: 100px;
    background: #409eff;
    animation: move 4s linear infinite;
    animation-delay: -2s;
}

@keyframes move {
    0% { transform: translateX(0); }
    100% { transform: translateX(300px); }
}

2. 多动画时序控制

当一个元素同时应用多个动画时，通过给animation-delay设置不同的值，可以让多个动画错开启动时间，实现更丰富的组合效果。

/* 元素同时执行缩放和旋转动画，旋转动画延迟1秒启动 */
.multi-animation {
    width: 80px;
    height: 80px;
    background: #f56c6c;
    animation: scale 2s ease-in-out infinite, rotate 2s linear infinite;
    animation-delay: 0s, 1s;
}

@keyframes scale {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

3. 配合animation-fill-mode保留延迟前的状态

默认情况下动画执行前元素会保持原始样式，如果希望动画延迟期间元素就保持动画的初始状态，可以配合animation-fill-mode: backwards使用。

/* 延迟3秒执行，延迟期间元素就应用动画0%的样式 */
.delay-fill {
    width: 120px;
    height: 120px;
    background: #67c23a;
    animation: fadeIn 1s ease forwards;
    animation-delay: 3s;
    animation-fill-mode: backwards;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

4. 列表项交错动画效果

在渲染列表时，经常需要让每个列表项依次执行入场动画，这时可以给每个列表项设置递增的animation-delay值，实现交错入场的效果。

<ul class="list">
    <li class="item">列表项1</li>
    <li class="item">列表项2</li>
    <li class="item">列表项3</li>
    <li class="item">列表项4</li>
</ul>

.list {
    list-style: none;
    padding: 0;
}

.item {
    width: 200px;
    height: 40px;
    line-height: 40px;
    margin: 10px 0;
    background: #e6a23c;
    color: #fff;
    text-align: center;
    animation: slideIn 0.5s ease forwards;
    opacity: 0;
}

/* 给每个列表项设置递增的延迟时间 */
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }
.item:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideIn {
    0% { opacity: 0; transform: translateX(-50px); }
    100% { opacity: 1; transform: translateX(0); }
}

注意事项

• animation-delay的值仅在动画第一次启动时生效，循环动画的后续循环不会再次应用延迟时间。
• 如果同时设置了animation属性简写，animation-delay要放在animation-duration之后，否则属性值会被错误解析。
• 负值延迟的时间不能超过动画的总时长，否则动画会直接从结束状态开始播放，不符合预期效果。

实际开发中可以根据动画的总时长和需要的启动进度，灵活计算animation-delay的负值，避免手动调整关键帧的麻烦。

cssanimation-delay动画延迟前端动画CSS动画修改时间：2026-07-10 01:33:29