如何让CSS Logo动画与循环HTML视频开头完美同步？

核心原因 #

原生HTML5 video的loop属性存在循环间隙延迟，尤其是当视频文件未做无缝循环处理时，每次循环结束到重新启动会有几毫秒到几十毫秒的停顿。而CSS动画基于浏览器时钟独立运行，多次循环后这种微小延迟会累积，导致动画与视频逐渐错位。

推荐解决方向 #

1. 用JavaScript完全接管视频循环（替代原生loop） #

放弃原生loop属性，通过监听视频时间轴实现无缝循环，同时同步触发SVG动画：

const video = document.querySelector('video');
const logo = document.querySelector('.svg-logo');

// 重置SVG动画状态
function resetLogoAnimation() {
  logo.classList.remove('logo-fade');
  // 强制浏览器重绘后重新添加动画类
  void logo.offsetWidth;
  logo.classList.add('logo-fade');
}

// 监听视频时间，接近结束时跳转开头，避免ended事件延迟
video.addEventListener('timeupdate', () => {
  // 视频时长54秒，在53.5秒时跳转（可根据实际调整阈值）
  if (video.currentTime >= 53.5) {
    video.currentTime = 0;
    resetLogoAnimation();
  }
});

// 首次加载完成后启动
video.addEventListener('loadedmetadata', () => {
  video.play();
  resetLogoAnimation();
});

对应的CSS动画需与视频时长完全匹配：

.svg-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.logo-fade {
  animation: logoFade 54s infinite;
}

@keyframes logoFade {
  0% { opacity: 0; }
  5.55% { opacity: 1; } /* 3秒/54秒 ≈5.55% */
  11.11% { opacity: 0; } /* 6秒/54秒 ≈11.11% */
  100% { opacity: 0; }
}

2. 让SVG动画完全跟随视频时间轴（无独立动画） #

彻底抛弃CSS循环动画，通过JS根据视频currentTime实时控制SVG透明度，完全同步：

const video = document.querySelector('video');
const logo = document.querySelector('.svg-logo');

// 实时更新SVG透明度
function updateLogoOpacity(time) {
  let opacity = 0;
  if (time >= 0 && time < 3) {
    // 0-3秒线性淡入
    opacity = time / 3;
  } else if (time >= 3 && time < 6) {
    // 3-6秒线性淡出
    opacity = 1 - ((time - 3) / 3);
  }
  logo.style.opacity = opacity;
}

// 监听视频时间变化
video.addEventListener('timeupdate', () => {
  updateLogoOpacity(video.currentTime);
});

// 首次播放启动
video.addEventListener('loadedmetadata', () => {
  video.play();
  updateLogoOpacity(0);
});

// 处理用户手动拖动进度条的情况
video.addEventListener('seeked', () => {
  updateLogoOpacity(video.currentTime);
});

这种方式完全依赖视频时间轴，无论视频循环、跳转，SVG状态都能实时匹配，彻底避免同步问题。

3. 优化原生loop的同步逻辑（不推荐） #

如果坚持用原生loop，可通过检测视频跳转触发动画重置：

const video = document.querySelector('video');
const logo = document.querySelector('.svg-logo');

let lastTime = 0;
video.addEventListener('timeupdate', () => {
  // 检测视频是否从接近末尾跳转到开头（循环触发）
  if (video.currentTime < 1 && lastTime > 50) {
    resetLogoAnimation();
  }
  lastTime = video.currentTime;
});

function resetLogoAnimation() {
  logo.classList.remove('logo-fade');
  void logo.offsetWidth;
  logo.classList.add('logo-fade');
}

但这种方式仍可能因浏览器事件延迟出现微小错位，稳定性不如前两种方案。

总结 #

优先选择方案2（实时跟随视频时间轴），它完全消除了动画与视频的独立时钟差异，是最稳定的同步方式；如果需要保留CSS动画灵活性，选择方案1用JS接管循环并重置动画，也能解决累积错位问题。原生loop的间隙延迟是浏览器固有行为，很难彻底消除，不依赖它是更可靠的选择。

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