将CSS animation-timeline滚动动画转为跨浏览器JS实现求助

针对你用scroll-timeline polyfill替代CSS animation-timeline时出现的动画失效问题，以下是具体修复方案和原因分析：

问题根源 #

你的JS代码存在几个关键问题：

• ScrollTimeline参数冗余（同时指定axis和orientation）
• range参数使用了polyfill不完全支持的字符串格式
• 错误保留了固定duration参数（滚动时间线不需要固定时长）

修复后的代码 #

// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const videoElement = document.querySelector('[data-section-id="66d339fcaa91932c1202ad7e"] video');
  
  // 初始化滚动时间线，移除冗余的orientation参数
  const scrollTimeline2 = new ScrollTimeline({
    source: document.documentElement,
    axis: "block"
  });

  videoElement.animate(
    { transform: ["translateY(0)", "translateY(-33vh)"] },
    {
      fill: 'both',
      timeline: scrollTimeline2,
      // 使用polyfill支持的对象格式定义range
      rangeStart: { target: videoElement, edge: 'cover', offset: '30%' },
      rangeEnd: { target: videoElement, edge: 'cover', offset: '66%' },
      // 移除duration参数，滚动时间线基于滚动进度而非固定时长
    }
  );
});

关键修复点说明 #

• 移除冗余参数：orientation是ScrollTimeline的旧属性名，当前标准已改用axis，同时指定两者会导致polyfill解析异常，保留axis: "block"即可。
• range参数格式调整：部分polyfill版本对字符串格式的"cover 30%"支持不完善，改用对象格式明确指定目标元素、边缘规则和偏移量，确保polyfill能正确识别动画触发范围。
• 删除duration参数：滚动时间线的动画进度是和页面滚动位置绑定的，固定duration会破坏这种关联，导致动画无法正常响应滚动行为。
• DOM加载时机：将代码包裹在DOMContentLoaded事件中，确保元素已被正确获取，避免因DOM未加载完成导致的选择器失效。

额外验证项 #

1. 确认已正确引入scroll-timeline polyfill，且版本为最新稳定版
2. 检查video元素的选择器是否与实际DOM匹配（你CSS和JS中的data-section-id不一致，需确认是否为笔误）

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