animation-name

animation-name 属性用于指定由 @keyframes 规则定义的动画的一个或多个名称，这些名称将应用于所选元素。

就像我们定义 JavaScript 中的变量一样，都是需要取名字的嘛。CSS 中也是一样的，我们需要定义这个动画的名字。这样，看名字我们就可以大概知道这个动画是干什么的了。

不过，除非必要情况，我们都可以在 GitHub 上找到很多开源的 CSS3 动画库来使用，可以很少写动画。但是我们还是必须要会，学会了才是自己的东西啊，分分钟就可以配合 Sass 自己写出来带前缀的动画了，我最后会将 Sass 的概念和使用。

@keyframes 规则指定要在动画关键帧序列上进行动画处理的属性值。

您可以在 animation-name 中指定一个动画名称，也可以在逗号分隔的名称列表中指定。 每个名称都属于一个 @keyframes 标识符。 如果使用 animation-name 指定的动画名称不存在，则不应用动画。

当您提供逗号分隔的动画名称列表时，此列表通常映射到其他动画相关属性提供的值列表，例如 animation-delay，animation-timing-function 和 animation-duration 属性其他。这些属性中的每个值列表都被视为类似数组，其中值列表中的每个值都有自己的索引。然后，值列表中的每个值都将映射到其对应的值，在其他属性中提供的列表中具有相同的索引。

看不懂？没事没事，先接着往下看吧。

animation-name 可以只有一个，也可以用逗号隔开。

animation-name: bounce;
animation-name: shake, jump;

接下来，我们先看个例子：

我们先定义一个 CSS 动画元素，定义我们想要它做的事情（这里的CSS样式我省略啦）：

.element {
 animation-name: bounce;  /*动画名*/
 animation-duration: 3s;  /*持续时间*/
 animation-iteration-count: infinite;   /*动画播放次数*/
}

接着我们在 定义执行动画的小方块。

这样，我们的小方块就可以运动了吗？显然是不行的呀 ~

还记得我们前面提到的 @keyframes 吗？我们要使用它来定义我们的关键帧，所谓的关键帧就是在某个时间点，改变它下一步的动作。

@keyframes bounce {
 from {
   top: 100px;
   animation-timing-function: ease-out;
 }
 25% { top: 50px;
   animation-timing-function: ease-in;
 }
 50% {
   top: 150px;
   animation-timing-function: ease-out;
 }
 75% {
   top: 75px;
   animation-timing-function: ease-in;
 }
 to {
   top: 100px;
 }
}

看到这里明白了没有呢？这里的步骤是这样的：首先定义我们想要实现动画的元素；接着我们对其定义 CSS 样式（这里注意不可少了position: relative;，不然动画不动哦）；接下来使用 animation-name 在我们要使用元素的 CSS 中设置，这样，就可以啦。

尴尬的是。。好像不能上传文件？我也不想使用录制 gif 图，这样太拖时间了。所以，我还是把关键的知识点讲清楚吧。不懂的点记得留言。

下一节：animation-duration