CSS 滚动驱动动画
CSS 滚动驱动动画
在最新的 Chrome 115 中，令人无比期待的 CSS 滚动驱动动画 (CSS scroll-driven animations) 终于正式支持了
Demo
Online Preview{target="_self"}
滚动进度时间线（Scroll progress timeline）
这里的 scroll() 是一个简写，可以传递两个参数，分别是 scroller 和 axis
scroller 表示滚动容器，支持以下几个关键值
nearest: 使用最近的祖先滚动容器 default。root: 使用文档视口作为滚动容器。self: 使用元素本身作为滚动容器。axis 表示滚动方向，支持以下几个关键值
block: 滚动容器的块级轴方向 default。inline: 滚动容器内联轴方向。y: 滚动容器沿 y 轴方向。x: 滚动容器沿 x 轴方向。css
.test { /* 无参数 */ animation-timeline: scroll(); /* 设置滚动容器 */ animation-timeline: scroll(nearest); /* 默认 */ animation-timeline: scroll(root); animation-timeline: scroll(self); /* 设置滚动方向 */ animation-timeline: scroll(block); /* 默认 */ animation-timeline: scroll(inline); animation-timeline: scroll(y); animation-timeline: scroll(x); /* 同时设置 */ animation-timeline: scroll(block nearest); /* 默认 */ animation-timeline: scroll(inline root); animation-timeline: scroll(x self); }
完整代码
html
<body> <main> <div class="progress"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </main> </body>
css
body { margin: 0; } main { height: 100vh; width: 100vw; overflow: scroll; scroll-timeline: --scroller block; } .progress { position: fixed; top: 0; left: 0; right: 0; height: 10px; background-color: #f44336; transform-origin: 0 50%; animation: grow-progress 3s linear; /* 这里必须使用命名的 scroll-timeline-name 而不是 scroll()，因为 progress 是 fixed 定位，父亲容器是 body 而不是 main */ animation-timeline: --scroller; } @keyframes grow-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } .block { width: 500px; height: 1000px; }
相关知识
揭秘360度全景展示：轻松实现CSS旋转动画全攻略
用CSS3实现无限循环的无缝滚动
用WPS演示制作车轮滚滚动画效果
滚动车轮
flash制作车轮往前滚动的动画效果
轻松塑形，CSS助力打造健康生活新篇章
【上海电动滚筒直销TDY753280
为什么css压缩(word2016激活密钥)
跳舞毯驱动
通用跳舞毯驱动
网址: CSS 滚动驱动动画 https://m.trfsz.com/newsview1616402.html
