一文看懂CSS3动画 css3的动画

本文将使用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: bouncingLoader 0.6s infinite alternate;

这行代码做了以下三件事:

告诉loader元素使用keyframes bouncingLoader。

设置动画的长度为0.6秒。

无限次地运行动画。在完成一个循环后，动画的方向就会发生变化，也就是反转。

你已经为弹跳加载器的第一个圆点定义了这些属性。为了瞄准第二个(2)和第三个(3)圆点，你使用了第n个子(n)选择器，它允许你选择和瞄准一个或多个元素，它们是父元素的第n个子元素。此外，对于其余的span元素，您刚刚定义了动画延迟，因此每个元素不会同时开始动画，而是延迟了定义时间后才开始，结果就是破浪形状。