“约见”面试官系列之常见面试题第十三篇之css动画效果（建议收藏）
目錄
?
CSS動畫簡介
第一部分：CSS Transition
1.1 基本用法
1.2 transition-delay
1.3 transition-timing-function
1.4 transition的各項屬性
1.5 transition的使用注意
1.6 transition的局限
第二部分：CSS Animation
2.1 基本用法
2.2 animation-fill-mode
2.3 animation-direction
2.4 animation的各項屬性
2.5 keyframes的寫法
2.6 animation-play-state
2.7 瀏覽器前綴
CSS動畫簡介
?
現在，我很少寫介紹CSS的文章，因為感覺網站開發的關鍵還是在服務器端。
但是，CSS動畫除外，它實在太有用了。
本文介紹CSS動畫的兩大組成部分：transition和animation。我不打算給出每一條屬性的詳盡介紹，那樣可以寫一本書。這篇文章只是一個簡介，幫助初學者了解全貌，同時又是一個快速指南，當你想不起某一個用法的時候，能夠快速地找到提示。
我的主要參考資料是，2013年10月，Lea Verou在JSConf.Asia上面的演講《CSS in the 4th Dimension》。那是一個非常棒的演講，有視頻和幻燈片，強烈推薦。
第一部分：CSS Transition
1.1 基本用法
在CSS 3引入Transition（過渡）這個概念之前，CSS是沒有時間軸的。也就是說，所有的狀態變化，都是即時完成。
?
上面是一個演示，當鼠標放置于縮略圖之上，縮略圖會迅速變大。注意，縮略圖的變大是瞬間實現的。下面是代碼，相當簡單。
img{height:15px;width:15px; }img:hover{height: 450px;width: 450px; }transition的作用在于，指定狀態變化所需要的時間。
img{transition: 1s; }上面代碼指定，圖片放大的過程需要1秒，效果如下。
?
我們還可以指定transition適用的屬性，比如只適用于height。
img{transition: 1s height; }這樣一來，只有height的變化需要1秒實現，其他變化（主要是width）依然瞬間實現，效果如下。
?
1.2 transition-delay
在同一行transition語句中，可以分別指定多個屬性。
img{transition: 1s height, 1s width; }但是，這樣一來，height和width的變化是同時進行的，跟不指定它們沒有差別，效果如下。
?
我們希望，讓height先發生變化，等結束以后，再讓width發生變化。實現這一點很容易，就是為width指定一個delay參數。
img{transition: 1s height, 1s 1s width; }上面代碼指定，width在1秒之后，再開始變化，也就是延遲（delay）1秒，效果如下。
?
delay的真正意義在于，它指定了動畫發生的順序，使得多個不同的transition可以連在一起，形成復雜效果。
1.3 transition-timing-function
transition的狀態變化速度（又稱timing function），默認不是勻速的，而是逐漸放慢，這叫做ease。
img{transition: 1s ease; }除了ease以外，其他模式還包括
（1）linear：勻速
（2）ease-in：加速
（3）ease-out：減速
（4）cubic-bezier函數：自定義速度模式
最后那個cubic-bezier，可以使用工具網站來定制。
img{transition: 1s height cubic-bezier(.83,.97,.05,1.44); }上面的代碼會產生一個最后階段放大過度、然后回縮的效果。
?
1.4 transition的各項屬性
transition的完整寫法如下。
img{transition: 1s 1s height ease; }這其實是一個簡寫形式，可以單獨定義成各個屬性。
img{transition-property: height;transition-duration: 1s;transition-delay: 1s;transition-timing-function: ease; }1.5 transition的使用注意
（1）目前，各大瀏覽器（包括IE 10）都已經支持無前綴的transition，所以transition已經可以很安全地不加瀏覽器前綴。
（2）不是所有的CSS屬性都支持transition，完整的列表查看這里，以及具體的效果。
（3）transition需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。比如，height從0px變化到100px，transition可以算出中間狀態。但是，transition沒法算出0px到auto的中間狀態，也就是說，如果開始或結束的設置是height: auto，那么就不會產生動畫效果。類似的情況還有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。
1.6 transition的局限
transition的優點在于簡單易用，但是它有幾個很大的局限。
（1）transition需要事件觸發，所以沒法在網頁加載時自動發生。
（2）transition是一次性的，不能重復發生，除非一再觸發。
（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。
（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。
CSS Animation就是為了解決這些問題而提出的。
第二部分：CSS Animation
2.1 基本用法
首先，CSS Animation需要指定動畫一個周期持續的時間，以及動畫效果的名稱。
div:hover {animation: 1s rainbow; }上面代碼表示，當鼠標懸停在div元素上時，會產生名為rainbow的動畫效果，持續時間為1秒。為此，我們還需要用keyframes關鍵字，定義rainbow效果。
@keyframes rainbow {0% { background: #c00; }50% { background: orange; }100% { background: yellowgreen; } }上面代碼表示，rainbow效果一共有三個狀態，分別為起始（0%）、中點（50%）和結束（100%）。如果有需要，完全可以插入更多狀態。效果如下。
?
默認情況下，動畫只播放一次。加入infinite關鍵字，可以讓動畫無限次播放。
div:hover {animation: 1s rainbow infinite; }也可以指定動畫具體播放的次數，比如3次。
div:hover {animation: 1s rainbow 3; }這里還有一個心臟跳動的例子，可供參考。
2.2 animation-fill-mode
動畫結束以后，會立即從結束狀態跳回到起始狀態。如果想讓動畫保持在結束狀態，需要使用animation-fill-mode屬性。
div:hover {animation: 1s rainbow forwards; }forwards表示讓動畫停留在結束狀態，效果如下。
?
animation-fill-mode還可以使用下列值。
（1）none：默認值，回到動畫沒開始時的狀態。
（2）backwards：讓動畫回到第一幀的狀態。
（3）both: 根據animation-direction（見后）輪流應用forwards和backwards規則。
2.3 animation-direction
動畫循環播放時，每次都是從結束狀態跳回到起始狀態，再開始播放。animation-direction屬性，可以改變這種行為。
下面看一個例子，來說明如何使用animation-direction。假定有一個動畫是這樣定義的。
@keyframes rainbow {0% { background-color: yellow; }100% { background: blue; } }默認情況是，animation-direction等于normal。
div:hover {animation: 1s rainbow 3 normal; }此外，還可以等于取alternate、reverse、alternate-reverse等值。它們的含義見下圖（假定動畫連續播放三次）。
簡單說，animation-direction指定了動畫播放的方向，最常用的值是normal和reverse。瀏覽器對其他值的支持情況不佳，應該慎用。
2.4 animation的各項屬性
同transition一樣，animation也是一個簡寫形式。
div:hover {animation: 1s 1s rainbow linear 3 forwards normal; }這是一個簡寫形式，可以分解成各個單獨的屬性。
div:hover {animation-name: rainbow;animation-duration: 1s;animation-timing-function: linear;animation-delay: 1s;animation-fill-mode:forwards;animation-direction: normal;animation-iteration-count: 3; }2.5 keyframes的寫法
keyframes關鍵字用來定義動畫的各個狀態，它的寫法相當自由。
@keyframes rainbow {0% { background: #c00 }50% { background: orange }100% { background: yellowgreen } }0%可以用from代表，100%可以用to代表，因此上面的代碼等同于下面的形式。
@keyframes rainbow {from { background: #c00 }50% { background: orange }to { background: yellowgreen } }如果省略某個狀態，瀏覽器會自動推算中間狀態，所以下面都是合法的寫法。
@keyframes rainbow {50% { background: orange }to { background: yellowgreen } }@keyframes rainbow {to { background: yellowgreen } }甚至，可以把多個狀態寫在一行。
@keyframes pound {from，to { transform: none; }50% { transform: scale(1.2); } }另外一點需要注意的是，瀏覽器從一個狀態向另一個狀態過渡，是平滑過渡。steps函數可以實現分步過渡。
div:hover {animation: 1s rainbow infinite steps(10); }這里有一個非常神奇的例子，可以看到steps函數的用處。
2.6 animation-play-state
有時，動畫播放過程中，會突然停止。這時，默認行為是跳回到動畫的開始狀態。
?
上面動畫中，如果鼠標移走，色塊立刻回到動畫開始狀態。
如果想讓動畫保持突然終止時的狀態，就要使用animation-play-state屬性。
div {animation: spin 1s linear infinite;animation-play-state: paused; }div:hover {animation-play-state: running; }上面的代碼指定，沒有鼠標沒有懸停時，動畫狀態是暫停；一旦懸停，動畫狀態改為繼續播放。效果如下。
?
2.7 瀏覽器前綴
目前，IE 10和Firefox（>= 16）支持沒有前綴的animation，而chrome不支持，所以必須使用webkit前綴。
也就是說，實際運用中，代碼必須寫成下面的樣子。
div:hover {-webkit-animation: 1s rainbow;animation: 1s rainbow; }@-webkit-keyframes rainbow {0% { background: #c00; }50% { background: orange; }100% { background: yellowgreen; } }@keyframes rainbow {0% { background: #c00; }50% { background: orange; }100% { background: yellowgreen; } }（完）
本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。
歡迎一起私信交流。
“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?
總結
以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题第十三篇之css动画效果（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。
