回答

这个属性是实验性功能，目前仅 Chrome Canary (115以上)版本浏览器支持此特性，可以实现滚动鼠标滚轮滚动页面驱动动画效果。

示例代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>

    <style>
        #square {
          background-color: deeppink;
          width: 100px;
          height: 100px;
        
          animation-name: rotateAnimation;
          animation-duration: 3s;
          animation-direction: alternate;
            animation-timeline: scroll(); 
            position: fixed;
        
        }
        
        @keyframes rotateAnimation {
          from {
            
            transform: rotate(0deg);
          }
          to {
             
            transform: rotate(360deg);
          }
        }
        
        
        #stretcher {
          height: 1200px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="square"></div>
        <div id="stretcher"></div>
    </div>

</body>

</html>