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

最新推荐文章于 2025-03-27 09:24:18 发布

牛奶、不加可乐

最新推荐文章于 2025-03-27 09:24:18 发布

阅读量1.3k

点赞数 27

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/NLKevin/article/details/145823267

版权

CSS 专栏收录该内容

11 篇文章

订阅专栏

在现代网页设计中，滚动动画是一种非常流行的交互方式，能够增强用户体验并提升页面的视觉吸引力。通过 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. 完整代码示例

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Animation</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .container {
      height: 200vh; /* 增加页面高度以触发滚动 */
      padding: 20px;
    }

    .block {
      width: 500px;
      height: 500px;
      background-color: #3498db;
      margin: 50px auto;
      border-radius: 10px;
    }

    @keyframes appear {
      from {
        opacity: 0;
        scale: 0.5;
      }
      to {
        opacity: 1;
        scale: 1;
      }
    }

    .block {
      animation: appear linear;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</body>
</html>

4. 关键点解析

4.1 `@keyframes`

作用：定义动画的关键帧。

示例：

@keyframes appear {
  from { opacity: 0; scale: 0.5; }
  to { opacity: 1; scale: 1; }
}

4.2 `animation`

作用：将动画应用到元素上。
语法：animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;
示例：
```
animation: appear linear;
```