【前端面試系列】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;
}