【前端面试系列】CSS Animations

引言

前端面试总躲不过的几个知识点，像js的prototype，css的动画，当然高级点的性能优化不在本教程的内容列表里面，属于提高的内容。而本节就着重讲css的动画讲清楚。
资源来自：https://www.w3schools.com/css/css3_animations.asp

注意：以下所有内容翻译自上述官方教材，可能需要查看，强烈推荐点击链接中的示例代码，对比分析加深印象。如果单单看下面的所有例子纯代码可能不够直观，毕竟咱们学的主题是动画啊。

浏览器的支持情况

caniuse: https://caniuse.com/#search=animation

什么是CSS 动画（CSS Animations）

动画指的就是通过css控制样式状态的改变。开发者可以任意设置想要改变的css属性和次数。当然了，为了使用CSS动画，也需要同样遵守相关的规则，而首要的就是为动画设置一些keyframes。（keyframes：顾名思义就是关键帧，这是css动画的核心）

@keyframes 规则

当你在@keyframes设置css样式的时候，动画将会慢慢从当前的样式转变到新样式。当然了，丹丹设置keyframes还不行，因为逻辑上缺了与元素的绑定，那么该如何实现呢？就是通过设置对应的名称。下面举个例子：

例：动画取名叫example，绑定到对应的div中，动画持续4秒，动画的内容是背景色从红到黄。

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

注意：animation-duration属性定义了动画可以持续多长时间。如果这个属性没有被设置，动画就不会发生，因为默认值是0秒。

在上面这个例子中我们看到设置动画的核心就是在keyframe中的from和to两个关键字，这两个分别代表了动画进行到0%（也就是起始状态）和100%（也就是终止状态）。

是不是很奇怪上面的状态进度中为什么要引入百分比呢？因为动画其实是可以在每个百分比进度上定义关键帧（这个概念来自于flash动画，每个动画虽然以60帧每秒的速度快速播放着，但前后帧的关联度很高，完全可以通过设置关键的几帧和对应的过渡来压缩动画的大小）。

接下来这个例子我们就来试试这个百分比进度，同样是改变背景色，我们分别在25%，50%和100%的时候插入关键帧：

Example
/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

下面的例子中将会同时改变背景色和位置，同时保留上面的百分比设置：

Example
/* The animation code */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

动画延迟

有时候我们需要动画在几秒种后再触发，例如下面例子中就设置为2秒后触发：

Example
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

有意思的是，animation-delay属性还能接受负数，如果设置为-2s，那么动画开始的时候直接从N-2秒开始，而这个N就是之前设置的animation-duration持续时间。动画看起来就像是从中间开始播放了。就像下面这个例子：

Example
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: -2s;
}

设置动画循环播放次数

通过animatin-iteration-count属性可以设置动画运行的次数。下面的例子中我们设置动画运行3次

Example
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

下面的例子中通过设置值为’infinite’来使动画无限重复下去。

Example
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

动画的方向也可以反转

接下来我们通过设置animation-direction属性来控制动画的方向，可以是正常的运动（forwards），倒着来（backwards），或者是交替着来（alternate）。该属性包含以下这几个可选的值：

• normal : 默认的，按照正常设置的来
• reverse : 反向运动
• alternate ：第一圈正向运动，第二圈反向运动
• alternate-reverse： 第一圈反向运动，第二圈正向运动

下面的例子中我们看下反向运动：

Example
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-direction: reverse;
}

下面这个例子我们使用‘alternate’来实现交替的运动：

Example
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate;
}

下面的例子中我们实现 “alternate-reverse”

Example
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate-reverse;
}

设置动画的速度曲线

通过设置animation-timing-function可以设置动画的速度变化曲线，底层是基于贝塞尔曲线bezier function，具体可以百度下。
该属性包含以下的这些值：

• ease ：一开始和结尾慢，中间快 ，默认值；
• linear ：运动速度始终一致
• ease-in ：一开始慢
• ease-out：结尾慢
• ease-in-out ：开始结尾慢
• cubic-bezier(n,n,n,n) ：自定义曲线

下面例子展示了不同的速度曲线：

Example
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

为动画设置fill-mode填充模式

动画的显示是有范围的，起始于第一帧播放，终止于最后帧的播放。而animation-fill-mode可以重写这个行为。

该属性设置了在动画运动之外的行为，意思是设置动画开始前和结束后的状态。有以下这些选型：

• none ：默认值，不设置任何内容
• forwards：运动结束后回到第一帧状态（也就是起始状态）
• backwards ：获取第一帧的状态，保留这一状态直到animation-delay结束
• both：同时保留以上两种情况（forwards和backwards）

下面的例子保留最后一帧的状态：

Example
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

下面的例子保留第一帧的状态：

Example
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}

下面的例子在动画开始前保留第一帧，而在动画结束后保留最后一帧：

Example
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-fill-mode: both;
}

动画的速记属性

一共有6个属性是可以简写的，就是以下这几个：

Example
div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

同样效果可以像这样来速记：

Example
div {
    animation: example 5s linear 2s infinite alternate;
}