三行 CSS 实现滚动动画：提升用户体验的简单方法
简介
在这篇博客中，我将向大家展示如何使用仅三行简单的 CSS 代码，实现元素的滚动动画效果。通过创建一个视图容器，添加一些块元素，并利用 CSS 动画属性，我们可以轻松实现平滑的滚动动画。除此之外，我还会介绍如何根据滚动位置单独针对每个元素进行动画处理，以及如何使用动画范围属性确保元素在到达时完全完成动画。希望通过这篇博客，大家可以在自己的网站中应用这些效果，提升用户体验。
元素平滑滚动动画化
首先，我们需要为 HTML 页面设置基本的样式，并创建需要动画化的块元素。下面是一个简单的 HTML 和 CSS 示例：
<!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 中定义一个关键帧动画：
@keyframes appear {
from {
opacity: 0;
clip-path: inset(100% 100% 0 0);
}
to {
opacity: 1;
clip-path: inset(0 0 0 0);
}
}
这个关键帧动画定义了元素从透明到不透明的变化，并且使用 clip-path属性来创建一个逐渐展开的效果。接下来，我们将动画应用到块元素上：
.block {
animation: appear 1s linear;
}
通过设置动画属性，我们可以让所有块元素在页面加载时执行动画。
元素动画范围属性覆盖值
为了根据滚动位置触发动画，我们需要使用新的 CSS 属性：animation-timeline 和 animation-range。
.block {
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
animation-timeline: view();定义了动画时间轴为视图滚动。animation-range: entry 0% cover 40%;设置了动画范围属性，确保每个块元素在进入视图时开始动画，并在覆盖 40%视图时完成动画。
总结
通过以上三行关键的 CSS 代码，我们实现了元素的滚动动画效果：
.block {
animation: appear 1s linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
这不仅使我们的网页更具动态效果，还提升了用户的视觉体验。希望大家可以在自己的项目中尝试应用这些技巧，让网页变得更加生动有趣。