AI 摘要：本文详细介绍了如何使用纯 CSS 实现滚动驱动动画（Scroll-driven Animations），这是近年来 CSS 动画技术的一项重要进步。作者通过具体的代码示例和步骤，讲解了滚动驱动动画的三个核心组成部分：目标元素（target）、关键帧（keyframes）和时间轴（timeline），并重点介绍了两种新的时间轴类型——scroll() 和 view()，它们分别基于用户滚动行为和元素进入视口的行为触发动画。此外，文章还强调了动画对用户体验的影响，提醒开发者注意运动敏感性问题，并提供如何通过媒体查询（如 prefers-reduced-motion）优化动画以提升可访问性的建议。

WebKit

A guide to Scroll-driven Animations with just CSS

CSS animations have come a long way since Apple first introduced them to the web in 2007.