如何控制CSS @keyframes动画的触发时机？

实现方案 #

方法1：通过类名控制动画触发（最推荐） #

首先修改你的CSS代码，不要把动画属性直接绑定到div的默认样式上，而是把动画定义单独抽成一个专用类：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  /* 去掉默认的animation声明，避免页面加载就自动触发 */
}

@keyframes action {
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
}

/* 动画专用类，需要触发时再加到元素上 */
.animation-active {
  animation: action 5s infinite;
}

然后修改你的JavaScript代码，循环逻辑执行完成后，给目标div元素添加上面的专用类即可触发动画：

// 先获取目标元素，也可以用id选择器定位更精准
const targetDiv = document.querySelector('div');

for (var i = 0; i < 10; i++) {
    // 你的业务逻辑
}
// 循环执行完成后添加类，触发动画
targetDiv.classList.add('animation-active');

方法2：动态修改animation属性 #

如果你不想额外新增类，也可以直接通过JS给元素赋值动画属性：

/* CSS去掉默认animation即可，不需要加额外类 */
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}

@keyframes action {
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
}

JS代码：

const targetDiv = document.querySelector('div');

for (var i = 0; i < 10; i++) {
    // 你的业务逻辑
}
// 直接给元素设置动画属性触发
targetDiv.style.animation = 'action 5s infinite';

重复触发动画补充说明 #

如果你需要后续多次触发同一个动画，不能直接重复添加类，需要先移除类、强制浏览器重排后再重新加类：

// 重复触发示例
targetDiv.classList.remove('animation-active');
// 强制浏览器重排，让删除类的操作先生效
void targetDiv.offsetWidth;
targetDiv.classList.add('animation-active');

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