CSS Animations 101

CSS 动画允许您通过为页面上的不同元素设置动画来使您的网站栩栩如生。 它是一个强大的工具，可用于创建增强用户体验的漂亮的动画，或创建作为页面焦点的更复杂的动画。

今天，我们将介绍创建自己的 CSS 动画所需的一切知识。 您需要知道的第一件事是@keyframes 规则

@keyframes规则

CSS 中的@keyframes 用于定义应用于元素的动画。 它用于指定动画序列中不同点（关键帧）的样式，也称为关键帧。

@keyframes 的基本语法如下：

@keyframes animation-name {  keyframe-selector {    property: value;  }}

animation-name 是您分配给动画的名称，以便可以使用 animation-name 属性将其应用于元素。 关键帧选择器（keyframe-selector)是一个百分比值或“从(from)”或“到(to)”的值，代表动画序列中将应用样式的帧。

动画名称(animation-name)

要应用@keyframes 规则中定义的动画，您可以将动画名称属性添加到元素。 例如，如果我们定义了这些关键帧：

@keyframes color-change {  from {    color: red;  }  to {    color: blue;  }}

我们可以通过简单地执行此操作将此动画应用于具有 animation-name 属性的元素：

p {  animation-name: color-change;}

动画持续时间(animation-duration)

现在有一个问题！ 任何给定动画的默认持续时间为 0 秒。 因此，如果您没有在动画名称旁边指定动画持续时间属性，您将无法看到动画。 因此，如果我们将之前的示例更新为如下所示：

p {  animation-name: color-change;  animation-duration: 2s;}

现在我们应该能够看到段落的颜色在 2 秒内从红色变为蓝色。

动画迭代次数（animation-iteration-count）

默认情况下，动画会运行一次，然后元素会恢复到动画开始前的样式。 animation-iteration-count 属性让我们指定动画应该运行多少次。 您可以使用数字或 infinite （不限）关键字让动画持续运行。

p {  animation-name: color-change;  animation-duration: 2s;  animation-iteration-count: infinite;}

动画方向（animation-direction）

在前面的示例中，段落将在 2 秒内从红色变为蓝色。 然后它将跳回红色并无限期地重复这个动画。 但是，如果我们希望动画从红色运行到蓝色，然后反向运行，以便从蓝色过渡到红色呢？ 这就是 animation-direction 属性发挥作用的地方。 我们可以为 animation-duration 属性指定 4 个不同的值：

normal: 从第一个关键帧 (0%) 运行到最后一个 (100%)reverse: 从最后一个关键帧（100%）运行到第一个（0%）alternate: 轮流运行，动画一次向前，然后一次反向等。alternate-reverse:轮流向后运行一次动画，然后向前运行一次。

p {  animation-name: color-change;  animation-duration: 2s;  animation-iteration-count: infinite;  animation-direction: alternate;}

动画计时函数（animation-timing-function）

animation-timing-function CSS 属性用于设置动画的计时功能。 计时功能控制动画通过其关键帧的速度。 它可用于在关键帧之间创建平滑或渐进的过渡，或创建更突然的过渡。

有几个预定义的计时函数可以与 animation-timing-function 属性一起使用：

ease: 开始缓慢，加速，然后再次减速（默认值）linear: 以恒定速度前进ease-in: 开始慢，然后加速ease-out: 开始快，然后慢下来ease-in-out: 开始缓慢，加速，然后再次减速

此外，您还可以使用 cubic-bezier(x1, y1, x2, y2) 函数创建您自己的自定义 cubic-bezier 计时函数，其中 x1、y1、x2、y2 是 cubic-bezier 贝塞尔曲线的两个控制点的坐标 。

动画填充模式（animation-fill-mode）

animation-fill-mode CSS 属性用于指定元素在动画前后的样式。 它可用于控制动画完成后元素的最终状态。

有几个预定义值可以与 animation-fill-mode 属性一起使用：

none: （默认值）动画对动画前后的元素没有影响forwards: 元素在动画完成后保留动画最后一个关键帧设置的样式值。backwards:元素在动画开始前被设置为动画第一个关键帧的样式值。both: 元素在动画开始前设置为动画第一个关键帧的样式值，并在动画完成后保留动画最后一个关键帧设置的样式值。动画延迟（animation-delay）

最后一个与动画相关的 CSS 属性是 animation-delay。 此属性用于指定动画开始前应经过的时间量。 它可用于在元素加载时间和动画开始时间之间创建延迟。

好的！ 这些是 CSS 动画的基础知识。 现在，让我们逐步构建一个很酷的动画来进行一些练习。

这是我们将构建的动画：

让我们从设置 HTML 开始：

<div class='box' />

现在，让我们给box一些初始样式

.box {  width: 100px;  height: 100px;  background-color: #4caf50;}

然后可以为我们的动画定义关键帧

@keyframes move-and-color {  0% {    transform: translateX(-150) rotate(0deg) scale(1);    background-color: #4caf50;  }  25% {    transform: translateX(0px) rotate(180deg) scale(1.5);    background-color: #8bc34a;  }  50% {    transform: translateX(150px) rotate(360deg) scale(1);    background-color: #cddc39;  }  75% {    transform: translateX(0px) rotate(180deg) scale(1.5);    background-color: #8bc34a;  }  100% {    transform: translateX(-150px) rotate(0deg) scale(1);    background-color: #4caf50;  }}

在此动画中，我们使用百分比值来更精细地控制整个动画中的样式。 我们同时沿 x 轴移动盒子，绕原点旋转它，放大和缩小它，并改变它的颜色！

现在让我们将动画应用于box

.box {  width: 100px;  height: 100px;  background-color: #4caf50;  animation: move-and-color;  animation-duration: 3s;  animation-timing-function: ease-in-out;  animation-iteration-count: infinite;}

瞧！ 盒子box有了动画！ 我们已将其设置为需要 3 秒才能完成一次的动画，并无限期地继续。