实现随页面滚动而出现的动画效果

在现代网页设计中，滚动动画是一种非常流行的交互方式，能够增强用户体验并提升页面的视觉吸引力。通过 CSS 动画和 animation-timeline 属性，我们可以轻松实现组件（如图片、文本等）在页面滚动时逐渐出现的动画效果。本文将详细介绍如何实现这一效果。

---

1. 实现思路

1. 定义动画：使用 @keyframes 定义组件从隐藏到显示的动画效果。
2. 绑定动画：通过 animation 属性将动画应用到组件上。
3. 控制动画触发时机：使用 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. 完整代码示例

以下是一个完整的示例，展示如何实现组件在页面滚动时逐渐出现的动画效果：

<!