为何animation-timeline: view()在生产环境中无法正常工作？

我在作品集网站中使用animation-timeline实现滚动触发动画，开发环境下一切正常，但部署到Github Pages后动画完全不工作。另外在Chrome开发者工具中，animation-timeline属性被划上删除线，标记为无效。

使用的代码 #

CSS

/* ------ SCROLL ANIMATIONS ------- */
.outer-shroud {
    animation: autoShowAnimation both;
    animation-timeline: view(100% 5%);
}

@keyframes autoShowAnimation {
    from {
        opacity: 0;
        transform: translateY(100px) scale(0.3);
        box-shadow: 0 0 1000px rgba(160, 158, 255, 0.944);
    } to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

HTML

<div className='outer-shroud' id='riddym' onClick={handleRiddymClick}>
     <div className='shroud'>
          <div className='project-title'>
               <div className='title'>
                    <h1>Riddym</h1>
                    <h3><span>July '24</span> — A familiar rhythm game, reimagined.</h3>
               </div>
          </div>
          <div className='arrow'>
               <i className="fa fa-arrow-right-long"></i>
          </div>
          <div className='project'>
               <div className='top-bar'>
                    <div className='dot-container'>
                         <div className='dot' id='dot-one'></div>
                         <div className='dot' id='dot-two'></div>
                         <div className='dot' id='dot-three'></div>
                    </div>
                         <div className='search-bar'></div>
               </div>
               <img src='/riddym/riddym-sample.png' alt='riddym'/>
          </div>
     </div>
</div>

问题原因及修复方案 #

1. 废弃的语法导致属性无效
   Chrome对view()函数的语法已更新，旧的view(100% 5%)写法不再被支持，必须指定轴类型（block/inline/vertical/horizontal）。修改后的正确语法：

   animation-timeline: view(block 100% 5%);
   

   这就是开发者工具中属性被划删除线的直接原因——浏览器无法识别不符合标准的语法。

2. 添加浏览器前缀兼容
   虽然Chrome 115+稳定版支持滚动驱动动画，但为了覆盖更多环境，建议添加-webkit-前缀：

   .outer-shroud {
       animation: autoShowAnimation both;
       -webkit-animation-timeline: view(block 100% 5%);
       animation-timeline: view(block 100% 5%);
   }
   

3. 检查Github Pages的构建配置
   部分CSS压缩工具会误判animation-timeline为无效属性并删除，导致生产环境中缺失该规则。请检查你的构建工具（如Vite、Webpack）配置，确保这类实验性CSS属性不会被移除。

4. 确认浏览器版本
   滚动驱动动画仅支持Chrome 115+、Edge 115+等现代浏览器，若访问者使用的版本过低，动画自然无法运行。可以考虑添加降级方案，比如使用JavaScript实现的滚动动画作为备选。

验证修复 #

修改CSS后重新部署到Github Pages，打开Chrome开发者工具查看animation-timeline属性是否正常识别，同时测试滚动时动画是否触发。

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