在现代网页设计中，滚动动画是一种非常流行的交互方式，能够增强用户体验并提升页面的视觉吸引力。通过 CSS 动画和 animation-timeline 属性，我们可以轻松实现组件（如图片、文本等）在页面滚动时逐渐出现的动画效果。本文将详细介绍如何实现这一效果。
1. 实现思路
定义动画：使用 @keyframes 定义组件从隐藏到显示的动画效果。
绑定动画：通过 animation 属性将动画应用到组件上。
控制动画触发时机：使用 animation-timeline 和 animation-range 属性，将动画与页面滚动绑定，并控制动画的触发范围和持续时间。
2. 实现步骤
2.1 定义动画
使用 @keyframes 定义组件从隐藏到显示的动画效果。例如，组件从透明和缩小状态逐渐变为不透明和正常大小。
@keyframes appear {
from {
opacity: 0;
scale: 0.5;
}
to {
opacity: 1;
scale: 1;
}
}
2.2 应用动画
将动画应用到组件上，并设置动画的持续时间和触发时机。
.block {
animation: appear linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
animation: appear linear;：将 appear 动画应用到组件上，动画速度为线性。
animation-timeline: view();：将动画与页面滚动绑定。
animation-range: entry 0% cover 40%;：定义动画的触发范围：
entry 0%：当组件进入视口时开始动画。
cover 40%：当组件覆盖视口的 40% 时完成动画。
3. 完整代码示例
以下是一个完整的示例，展示如何实现组件在页面滚动时逐渐出现的动画效果：