- 创建动画。
- 将其连接到必须设置动画的元素，并指示所需的功能。
动画是一组关键帧，它们存储在css中，我们先看一段简单的动画代码段：
@keyframes test-animation {
0% {
width: 50px;
}
100% {
width: 150px;
}
}
让我们整理一下：
关键字“ @keyframes”指示动画本身。
接下来动画的命名，“ test-animation”。
花括号{ }包含关键帧列表。在这种情况下，它是开始帧0％和结束帧100％。同样，开始和结束帧也可以写为关键字“ from ”和“ to”。
采用from..to..改写上面的代码,可以这样写：
@keyframes test-animation {
from {
width: 50px;
}
30% {
width: 99px;
}
60.8% {
width: 120px;
}
to {
width: 150px;
}
}
请注意，如果未指定起始帧（“ from ”，“ 0％”）或结束帧（“ to”，“ 100％”），浏览器将为他们设置动画功能的估算值，就像动画未应用。
将上面动画的代码应用到指定元素是通过两个命令完成的：
element {
animation-name: test-animation;
animation-duration: 2s;
}
规则:
“test-animation”设置创建的动画“ @keyframes”的名称。** “animation-duration”指出动画将播放多少秒。可以以秒（（3s，65s，.4s））或毫秒（（300ms，1000ms））表示**。
您可以对关键帧进行分组：
@keyframes animation-name {
0%, 35% {
width: 100px;
}
100% {
width:200px;
}
}
可以为一个元素设置很少的动画，其名称和参数应按设置顺序编写：
element {
animation-name: animation-1, animation-2;
animation-duration: 2s, 4s;
}
更多动画属性设置
animation-delay：功能可识别播放动画之前的延迟，以秒或毫秒为单位设置：
element {
animation-name: animation-1;
animation-duration: 2s;
animation-delay: 5s; // Before starting this animation, 5 sec will pass.
}
animation-iteration-count：动画播放次数。我们可以设置0、1、2、3…等中的任何正值，或者为无限重复设置“无限 ”。
element {
animation-name: animation-1;
animation-duration: 2s;
animation-delay: 5s;
animation-iteration-count: 3; //this animation plays 3 times
}
animation-fill-mode：可标识元素在动画开始之前和完成之后处于哪种状态。
animation-fill-mode：forwards：动画完成后，元素状态将对应于最后一帧。
animation-fill-mode：backwards：动画完成后，元素状态将对应于第一帧。
animation-fill-mode：both：动画开始之前，元素状态将与第一帧相对应，而在其完成之后将与最后一个帧相对应。
animation-play-state：动画的启动与暂停。该功能仅使用2个值：“ running ”或“ paused”。
animation-direction ：动画方向。我们可以管理动画播放的方向。它的参数可以取几个值：
animation-direction：normal;动画播放，这是动画的通常方向。
animation-direction：reverse;动画反向播放。
animation-direction: alternate;正常情况下，即使动画回放也将以相反的方向进行，而奇数。
animation-direction: alternate-reverse;动画重播将以正常方向进行，奇数回放将以相反方向进行。
animation-timing-function：动画时间函数，允许设置特殊功能，该功能负责动画重播速度。常用的函数名称有ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end.
这种时间函数可以自己创建：贝塞尔曲线cubic-bezier。
`animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);`
采用四个参数，并基于它们建立动画过程中的值分布曲线。可以在这里设置函数：
<u style="text-decoration: none; border-bottom: 1px dashed grey;">https://cubic-bezier.com/#.17,.67,.68,.82</u>
最后，可以借助steps (amount of steps, direction)功能将动画转换为一组离散值，其中，其自变量的作用取决于其步数和方向的数量（可以取值）start或end。在下面的示例中，动画将包含7个步骤，其中的最后一步将在动画完成之前完成：
元素{
animation-timing-function：steps（7，end）;
}
