动画迭代间隔的animation-delay失效问题及解决方法

问题根源 #

animation-delay的设计逻辑是仅在动画首次启动前触发延迟，当设置animation-iteration-count: infinite开启无限循环后，后续每一轮动画都会直接衔接上一轮的结束状态，不会再次触发延迟。你设置的1s延迟只会在第一次摇晃开始前生效，之后的循环就直接连起来了，所以看不到每次迭代间的暂停。

解决办法 #

方法1：把暂停时间融入动画总时长（最直接的纯CSS方案） #

将原动画时长（1s）加上想要的暂停时长（比如1s），把总时长设为2s，然后在关键帧里让最后一段时间保持静止状态，模拟暂停效果。

修改后的CSS代码：

.fa-shake {
    animation-name: fa-shake;
    animation-duration: 2s; /* 1s动画执行 + 1s暂停 */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    width: 150px;
    height: auto;
}

@keyframes fa-shake {
    /* 前50%时间（1s）执行摇晃动作 */
    0%, 10%, 30%, 50% {
        transform: rotate(10deg);
    }
    20%, 40% {
        transform: rotate(-20deg);
    }
    /* 后50%时间（1s）保持静止，实现暂停 */
    50.1%, 100% {
        transform: rotate(0deg);
    }
}

这样每一轮循环都会是「1秒摇晃 + 1秒暂停」，完全符合需求。

方法2：用CSS变量灵活控制时长（适合需频繁调整的场景） #

如果后续需要随时修改动画或暂停的时长，可以用CSS变量把两者分离，不用手动计算总时长：

.fa-shake {
    --shake-duration: 1s;
    --pause-duration: 1s;
    animation-name: fa-shake;
    animation-duration: calc(var(--shake-duration) + var(--pause-duration));
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    width: 150px;
    height: auto;
}

@keyframes fa-shake {
    0% {
        transform: rotate(0deg);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: rotate(10deg);
    }
    20%, 40%, 60%, 80% {
        transform: rotate(-20deg);
    }
    /* 按比例计算动画结束的节点，之后保持静止 */
    calc(100% * var(--shake-duration) / (var(--shake-duration) + var(--pause-duration))) {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

之后只要修改--shake-duration或--pause-duration的数值，就能快速调整动画和暂停的时长，不用改动关键帧的百分比。

方法3：JS控制动画播放状态（适合复杂交互场景） #

如果需要和用户交互结合（比如点击触发暂停），可以用JS切换animation-play-state属性：

const shakeElement = document.querySelector('.fa-shake');
// 每次动画结束后暂停1秒，再继续播放
shakeElement.addEventListener('animationend', () => {
    shakeElement.style.animationPlayState = 'paused';
    setTimeout(() => {
        shakeElement.style.animationPlayState = 'running';
    }, 1000);
});

这种方法适合纯CSS方案满足不了的复杂交互需求。

测试代码 #

替换原有CSS后，用以下HTML即可看到效果：

<img class="fa-shake" src="https://parspng.com/wp-content/uploads/2022/03/telephonepng.parspng.com-2-600x643.png">

内容的提问来源于stack exchange，提问作者Lucas