责任编辑将采用CSS3动画电影keyframes建立两个网页读取器，读取时带着四个红色格子乘风破浪形终端。它将向您展现怎样为读取网页结构设计HTML式样，建立动画电影的keyframes，并采用keyframes的动画电影延迟。
下列是你将在本讲义完结时制做的文本。
图中的四个红色格子，在网页读取操作过程中，呈现出菱形的颤动。
具体来说，先建立两个基本上的html文档：
<p>A simple representation of an animated bouncing loader!</p>
<div class=”loader”>
<span></span>
<span></span>
<span></span>
</div>
该文加进了两个名叫loader类的div。那个div负责管理建立大部份网页读取器原素。在那个div中，加进了四个已连续的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: bouncingLoader0.6s infinite alternate;
这行代码做了下列三件事:
告诉loader原素采用keyframes bouncingLoader。
设置动画电影的长度为0.6秒。
无限次地运行动画电影。在完成两个循环后，动画电影的方向就会发生变化，也就是反转。
你已经为弹跳读取器的第两个格子表述了这些属性。为了瞄准第二个(2)和第四个(3)格子，你采用了第n个子(n)选择器，它允许你选择和瞄准两个或多个原素，它们是父原素的第n个子原素。此外，对于其余的span原素，您刚刚表述了动画电影延后，因此每一原素不会同时开始动画电影，而是延后了表述时间后才开始，结果就是乘风破浪形状。
