如何使用JavaScript在视频指定时间点触发CSS动画播放

第一步：调整CSS样式 #

原有CSS直接把动画绑定在.animation类上，页面加载时就会自动播放一次，需要把动画属性拆分到单独的激活类中，默认状态不加载动画：

body {
  background-color: grey;
}

video {
  width: 600px;
}

.inner {
  position: relative;
  height: 1000px;
  width: 1000px;
  overflow: hidden;
}

.animation {
  width: 200px;
  position: absolute;
  z-index: 1;
  left: 500px;
  top: 100px;
  visibility: hidden;
  overflow: hidden;
}

/* 新增动画激活类，添加该类时才播放动画 */
.animation.active {
  animation-name: fling;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes fling {
  0% {left: 500px;top:100px;visibility:visible;}
  20% {left: 800px;top:10px;transform:rotate(360deg);}
  40% {left: 1100px;top:100px;transform:rotate(-180deg);}
  42% {visibility:hidden;}
  100% {visibility: hidden;}
}

第二步：编写JavaScript监听逻辑 #

核心逻辑通过监听video元素的timeupdate事件实现，该事件会在视频播放进度更新时持续触发，同时处理进度跳转、重播时的动画重置问题，避免重复触发：

// 获取DOM元素
const video = document.querySelector('video');
const animImg = document.querySelector('.animation');
// 配置触发动画的视频时间点（单位：秒，可自行修改）
const triggerTime = 3;
// 动画时长，和CSS里设置的animation-duration保持一致
const animDuration = 2;
// 触发标记，避免同一时间段内重复触发动画
let hasTriggered = false;

video.addEventListener('timeupdate', () => {
  const current = video.currentTime;
  // 播放到触发区间且动画未触发时，启动动画
  if (current >= triggerTime && current < triggerTime + animDuration && !hasTriggered) {
    hasTriggered = true;
    // 先移除类，强制浏览器重绘，保证动画能重新播放
    animImg.classList.remove('active');
    void animImg.offsetWidth; // 触发重排的固定写法
    // 添加激活类启动动画
    animImg.classList.add('active');
  }
  // 进度跳回触发点之前（拖进度条、重播）时，重置动画状态
  if (current < triggerTime && hasTriggered) {
    hasTriggered = false;
    animImg.classList.remove('active');
  }
});

关键注意点 #

• 不要用currentTime === triggerTime做精确判断：timeupdate事件触发频率约为每秒4次，很容易跳过精确时间点导致漏触发，用区间判断稳定性更高
• 重启动画必须先移除动画类、触发重绘后再重新添加类：浏览器会合并连续的DOM操作，如果不触发重绘，直接删了再加类不会重新执行动画
• 如果需要绑定多个时间点触发不同动画，只要把触发时间、对应元素做成配置数组，在timeupdate回调里遍历判断即可

完整HTML结构参考 #

<body>
  <center>
    <div class="inner">
      <video controls autoplay>
        <source src="missile.mp4" type="video/mp4">
      </video>
      <img class="animation" src="本地图片路径">
    </div>
  </center>
  <script>
    // 上述JS代码放在此处即可
  </script>
</body>

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