简介
在这篇博客中，我将向大家展示如何使用仅三行简单的 CSS 代码，实现元素的滚动动画效果。通过创建一个视图容器，添加一些块元素，并利用 CSS 动画属性，我们可以轻松实现平滑的滚动动画。除此之外，我还会介绍如何根据滚动位置单独针对每个元素进行动画处理，以及如何使用动画范围属性确保元素在到达时完全完成动画。希望通过这篇博客，大家可以在自己的网站中应用这些效果，提升用户体验。
https://cdpn.io/Stonewalling/fullpage/OJeprPB?nocache=true&view=
元素平滑滚动动画化
首先，我们需要为 HTML 页面设置基本的样式，并创建需要动画化的块元素。下面是一个简单的 HTML 和 CSS 示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animate on scroll</title>
<style>
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
h1 {
width: 100%;
height: 100vh;
line-height: 80vh;
text-align: center;
display: block;
font-size: 60px;
}
.view {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.block {
height: 200px;
width: 300px;
margin: 50px;
border: 0.5mm solid black;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(
0,
0,
0,
0.3
) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.block:nth-child(odd) {
background: rgb(232, 88, 67);
}
.block:nth-child(even) {
background: rgb(26, 84, 207);
}
@keyframes appear {
from {
opacity: 0;
clip-path: inset(100% 100% 0 0);
}
to {
opacity: 1;
clip-path: inset(0 0 0 0);
}
}
.block {
animation: appear 1s linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
</style>
</head>
<body>
<h1>Animate On Scroll</h1>
<div class="view">
<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 class="block"></div>
<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 class="block"></div>
<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>
|
在这个示例中，我们定义了一个包含多个块元素的视图容器。每个块元素都应用了相同的动画效果。接下来，让我们详细解释这三行关键的 CSS 代码。
动画时间轴属性视图
为了实现滚动动画，我们需要在 CSS 中定义一个关键帧动画：
1
2
3
4
5
6
7
8
9
10
| @keyframes appear {
from {
opacity: 0;
clip-path: inset(100% 100% 0 0);
}
to {
opacity: 1;
clip-path: inset(0 0 0 0);
}
}
|
这个关键帧动画定义了元素从透明到不透明的变化，并且使用clip-path属性来创建一个逐渐展开的效果。接下来，我们将动画应用到块元素上：
1
2
3
| .block {
animation: appear 1s linear;
}
|
通过设置动画属性，我们可以让所有块元素在页面加载时执行动画。
元素动画范围属性覆盖值
为了根据滚动位置触发动画，我们需要使用新的 CSS 属性：animation-timeline 和 animation-range。
1
2
3
4
| .block {
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
|
animation-timeline: view(); 定义了动画时间轴为视图滚动。animation-range: entry 0% cover 40%; 设置了动画范围属性，确保每个块元素在进入视图时开始动画，并在覆盖 40%视图时完成动画。
总结
通过以上三行关键的 CSS 代码，我们实现了元素的滚动动画效果：
1
2
3
4
5
| .block {
animation: appear 1s linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
|
这不仅使我们的网页更具动态效果，还提升了用户的视觉体验。希望大家可以在自己的项目中尝试应用这些技巧，让网页变得更加生动有趣。
设备支持度
animation-timeline - CSS: Cascading Style Sheets | MDN