DEV Community
·
无须JavaScript的滚动动画：介绍animation-timeline: view()
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
使用CSS的animation-timeline: view()属性，可以实现基于滚动的动画，无需JavaScript。该属性根据元素在视口中的滚动位置控制动画，提供更流畅的体验，并通过animation-range精确设置动画的开始和结束位置。这种方法减少了代码复杂性，提高了性能，适用于多种动态效果。目前，Chrome和Edge支持该功能，Firefox和Safari仍在开发中。
🎯
关键要点
- 使用CSS的animation-timeline: view()属性可以实现基于滚动的动画，无需JavaScript。
- animation-timeline属性允许CSS动画由元素在视口中的滚动位置控制。
- animation-range属性定义动画的开始和结束位置，提供精确的控制。
- 使用animation-timeline: view()可以减少代码复杂性，提高性能。
- 该方法适用于多种动态效果，如英雄文本动画、区块揭示和视差效果。
- 目前，Chrome和Edge支持该功能，Firefox和Safari仍在开发中。
❓
延伸问答
什么是animation-timeline: view()属性？
animation-timeline: view()属性允许CSS动画根据元素在视口中的滚动位置控制，而无需使用JavaScript。
如何使用animation-range属性？
animation-range属性定义动画的开始和结束位置，例如可以设置为entry 0% cover 50%，表示当元素顶部进入视口时开始动画，50%可见时结束。
使用animation-timeline: view()有什么好处？
使用animation-timeline: view()可以减少代码复杂性，提高性能，且不需要JavaScript，便于维护。
animation-timeline: view()适合哪些动态效果？
该属性适用于英雄文本动画、区块揭示和视差效果等多种动态效果。
目前哪些浏览器支持animation-timeline: view()？
目前，animation-timeline和view()在Chrome和Edge浏览器中得到支持，Firefox和Safari仍在开发中。
如何实现滚动触发的动画？
通过设置animation-timeline: view()和animation-range属性，可以实现基于滚动的动画效果。
➡️
