本文将使用CSS3动画keyframes创建一个页面加载器，加载时带着三个黄色圆点破浪形移动。它将向您展示如何为加载页面设计HTML样式，创建动画的keyframes，并使用keyframes的动画延迟。
以下是你将在本教程结束时制作的内容。
图中的三个黄色圆点，在页面加载过程中，呈现波浪形的跳动。
首先，先创建一个基本的html文件：
A simple representation of an animated bouncing loader!
文中添加了一个名为loader类的p。这个p负责创建所有页面加载器元素。在这个p中，添加了三个连续的span元素，每个元素表示一个页面加载器圆点。
第二步为页面定义基本的CSS：
/*_ OPTIONAL: Styles for the demo. *_/
body {
background: #2C294F;
padding: 2rem;
}
p {
font: 1rem/1.45 “Operator Mono”;
color: #A599E9;
text-align: center;
}这个代码块定义了p标记和主体的可选CSS样式。背景颜色，字体大小等属性可以根据自己的爱好更改。不过这些都不是动画所必须的样式，只是为了方便呈现动画效果。
关键的定义是下面的.loader样式：
/_ CSS for animated bouncing loader. _/
.loader {
display: flex;
justify-content: center;
align-items: center;
}
这里我们使用Flexbox，也就是display:flex; 它将弹跳的页面加载器水平和垂直放置在页面中间。
/_ Loader circles _/
.loader > span {
background: #FAD000;
border-radius: 50%;
margin: 5rem 0.5rem;
animation: bouncingLoader 0.6s infinite alternate;
}
.loader > span:nth-child(2) {
animation-delay: 0.2s;
}
.loader > span:nth-child(3) {
animation-delay: 0.4s;
}默认情况下，页面加载器的形状是方形的。我们要给它一个圆形形状，可以将边界半径设置为50%。.loader > span:nth-child(n)是指loader父元素下的第n个子元素。animation-delay是动画延迟时间。
这里最有趣的部分是animation属性。我们使用了一个名为bouncingLoader的动画keyframes，它每0.6s运行一次，并且无限重复。
定义动画的keyframes。keyframes用于定义动画行为，并让我们完全控制CSS动画的一个周期。我们将它定义为@keyframes，后面跟着动画的名字，在本例中是bouncingLoader。
在@keyframe规则中，使用from和to两个关键字来指定动画的起始点和结束点。同样地，你也可以用0%表示起点，用100%表示动画的终点。
此外，如果您想要多个动画转换，您可以定义一个百分比范围，每个百分比包含一个样式选择器列表。这些百分比可以以任何顺序列出。这些百分比的简单表示如下所示：
/_ Define the animation called bouncingLoader. _/
@keyframes bouncingLoader {
from {
width: 0.1rem;
height: 0.1rem;
opacity: 1;
transform: translate3d(0);
}
to {
width: 1rem;
height: 1rem;
opacity: 0.1;
transform: translate3d(0, -1rem, 0);
}
}这使用了from和to关键字，它们定义了圆点的宽度、高度和不透明度等基本样式属性。Loader中每个圆圈的宽和高从0.1rem到width:1rem;和height:1rem; 除此之外，为了创建弹跳效果，使用CSS transform属性更改给定元素的坐标，从而转换每个圆点的位置。
使用这个transform属性，采用了translate3D()函数，它接受三个输入来解释(x, y, z)坐标的变化。因为我们希望我们的装载机在波动运动中运行，我们需要主要沿着y轴平移，保持x轴和z轴不变。因此，结束点的值为(0，-1rem, 0)。
最后一部分。既然已经为@keyframe编写了代码，现在就该设置并运行它了。动画的运行是通过以下几行代码实现的（上面已显示过一次）:
/_ Loader circles _/
.loader > span {
background: #FAD000;
border-radius: 50%;
margin: 5rem 0.5rem;
animation: bouncingLoader 0.6s infinite alternate;
}
.loader > span:nth-child(2) {
animation-delay: 0.2s;
}
.loader > span:nth-child(3) {
animation-delay: 0.4s;
}
使用animation属性和/或它的子属性对想要动画的元素进行样式设置。使用此属性可以控制动画的时间、持续时间和其他细节。这里你已经使用了以下动画的子属性:
animation: animation-name, animation-duration, animation-iteration-count, animation-direction;
animation-name: 定义你的动画的名字，在我的例子中是加载器。
animation-duration: 配置动画完成一个循环的时间长度。
animation-iteration-count: 表示你希望动画循环在停止前播放多少次。
animation-direction: 定义动画播放的方向。
除了这些，还有其他几个子属性。你可以在Mozilla Web文档中获得详细信息。
基于这些，本文的动画定义如下:
animation: bouncingLoader 0.6s infinite alternate;
这行代码做了以下三件事:
告诉loader元素使用keyframes bouncingLoader。
设置动画的长度为0.6秒。
无限次地运行动画。在完成一个循环后，动画的方向就会发生变化，也就是反转。你已经为弹跳加载器的第一个圆点定义了这些属性。为了瞄准第二个(2)和第三个(3)圆点，你使用了第n个子(n)选择器，它允许你选择和瞄准一个或多个元素，它们是父元素的第n个子元素。此外，对于其余的span元素，您刚刚定义了动画延迟，因此每个元素不会同时开始动画，而是延迟了定义时间后才开始，结果就是破浪形状。
