Articles on Smashing Magazine — For Web Designers And Developers
·
CSS滚动驱动动画简介：滚动与视图进度时间线
💡
原文英文，约4500词，阅读约需17分钟。
📝
内容提要
CSS滚动驱动动画已发展十年，现可在网站中使用，无需JavaScript。它通过滚动位置控制动画，提供流畅的GPU加速体验。文章介绍了滚动进度时间线和视图进度时间线，帮助开发者掌握新特性在项目中的应用。
🎯
关键要点
- CSS滚动驱动动画已经发展了十年，现在可以在网站中使用，无需JavaScript。
- 滚动驱动动画通过滚动位置控制动画，提供流畅的GPU加速体验。
- 文章介绍了滚动进度时间线和视图进度时间线，帮助开发者掌握新特性在项目中的应用。
- 滚动进度时间线将动画时间线与特定轴的滚动容器的滚动位置链接。
- 匿名滚动时间线示例：创建一个博客文章顶部的滚动进度条来跟踪阅读进度。
- animation-timeline属性用于将动画与滚动行为关联，使用scroll()函数。
- animation-range属性定义了可滚动内容的哪一部分控制动画的开始和结束。
- 命名滚动时间线允许指定不同的滚动容器来链接动画。
- timeline-scope属性允许扩展滚动时间线的作用域，控制兄弟元素的动画。
- 视图进度时间线跟踪元素进入或退出可滚动内容的可视区域。
- view()函数用于创建视图进度动画，动画不再与时间相关，而是与空间相关。
- animation-range属性在视图时间线中定义元素在可视区域内的可见性控制动画的开始和结束。
- 使用timeline-range-names可以在@keyframes中定义元素进入和退出可视区域时的动画。
- 命名视图时间线和timeline-scope的结合可以扩展滚动驱动动画的可能性。
- 使用overflow: hidden可能会干扰滚动驱动动画，建议使用overflow: clip。
- 使用GPU友好的属性（如transforms和opacity）进行动画以获得最佳性能。
- 结合媒体查询和@supports规则以确保动画在用户没有运动限制时应用。
- 滚动驱动动画的规范仍在不断发展，开发者需关注最新的更新和变化。
❓
延伸问答
CSS滚动驱动动画是什么？
CSS滚动驱动动画是一种通过滚动位置控制动画的技术，无需JavaScript，提供流畅的GPU加速体验。
如何使用animation-timeline属性？
animation-timeline属性用于将动画与滚动行为关联，使用scroll()函数来指定滚动容器和轴。
什么是滚动进度时间线和视图进度时间线？
滚动进度时间线将动画时间线与滚动容器的滚动位置链接，而视图进度时间线跟踪元素进入或退出可视区域。
如何创建一个滚动进度条？
可以通过创建一个固定在页面顶部的<div>元素，并使用animation-timeline: scroll()来链接动画与滚动位置，从而实现滚动进度条。
使用overflow: hidden会有什么影响？
使用overflow: hidden可能会干扰滚动驱动动画，建议使用overflow: clip以避免问题。
视图进度时间线如何工作？
视图进度时间线使用view()函数，跟踪元素在可滚动内容的可视区域内的进入和退出，动画与空间相关而非时间。
➡️
