現(xiàn)在，我不太愛寫介紹CSS的文章，因為這不是網(wǎng)站開發(fā)的關(guān)鍵。

　　但是，CSS動畫除外，它實在太有用了。

　　本文介紹CSS動畫的兩大組成部分：transition和animation。我不打算給出每一條屬性的詳盡介紹，那樣可以寫一本書。這篇文章只是一個簡介，幫助初學(xué)者了解全貌，同時又是一個快速指南，當(dāng)你想不起某一個用法的時候，能夠快速地找到提示。

　　我的主要參考資料是，2013年10月，Lea Verou在JSConf.Asia上面的演講《CSS in the 4th Dimension》。那是一個非常棒的演講，有視頻和幻燈片，強(qiáng)烈推薦。

　第一部分：CSS Transition

　　1.1 基本用法

　　在CSS 3引入Transition（過渡）這個概念之前，CSS是沒有時間軸的。也就是說，所有的狀態(tài)變化，都是即時完成。

　　上面是一個演示，當(dāng)鼠標(biāo)放置于縮略圖之上，縮略圖會迅速變大。注意，縮略圖的變大是瞬間實現(xiàn)的。下面是代碼，相當(dāng)簡單。

img{
    height:15px;
    width:15px;
}

img:hover{
    height: 450px;
    width: 450px;
}

　　transition的作用在于，指定狀態(tài)變化所需要的時間。

img{
    transition: 1s;
}

　　上面代碼指定，圖片放大的過程需要1秒，效果如下。

　　我們還可以指定transition適用的屬性，比如只適用于height。

img{
    transition: 1s height;
}

　　這樣一來，只有height的變化需要1秒實現(xiàn)，其他變化（主要是width）依然瞬間實現(xiàn)，效果如下。

　　1.2 transition-delay

　　在同一行transition語句中，可以分別指定多個屬性。

img{
    transition: 1s height, 1s width;
}

　　但是，這樣一來，height和width的變化是同時進(jìn)行的，跟不指定它們沒有差別，效果如下。

　　我們希望，讓height先發(fā)生變化，等結(jié)束以后，再讓width發(fā)生變化。實現(xiàn)這一點很容易，就是為width指定一個delay參數(shù)。

img{
    transition: 1s height, 1s 1s width;
}

　　上面代碼指定，width在1秒之后，再開始變化，也就是延遲（delay）1秒，效果如下。

　　delay的真正意義在于，它指定了動畫發(fā)生的順序，使得多個不同的transition可以連在一起，形成復(fù)雜效果。

　　1.3 transition-timing-function

　　transition的狀態(tài)變化速度（又稱timing function），默認(rèn)不是勻速的，而是逐漸放慢，這叫做ease。

img{
    transition: 1s ease;
}

　　除了ease以外，其他模式還包括

（1）linear：勻速

（2）ease-in：加速

（3）ease-out：減速

（4）cubic-bezier函數(shù)：自定義速度模式

　　最后那個cubic-bezier，可以使用工具網(wǎng)站來定制。

img{
    transition: 1s height cubic-bezier(.83,.97,.05,1.44);
}

　　上面的代碼會產(chǎn)生一個最后階段放大過度、然后回縮的效果。

　　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）都已經(jīng)支持無前綴的transition，所以transition已經(jīng)可以很安全地不加瀏覽器前綴。

　?。?）不是所有的CSS屬性都支持transition，完整的列表查看這里，以及具體的效果。

　?。?）transition需要明確知道，開始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值，才能計算出中間狀態(tài)。比如，height從0px變化到100px，transition可以算出中間狀態(tài)。但是，transition沒法算出0px到auto的中間狀態(tài)，也就是說，如果開始或結(jié)束的設(shè)置是height: auto，那么就不會產(chǎn)生動畫效果。類似的情況還有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。

　　1.6 transition的局限

　　transition的優(yōu)點在于簡單易用，但是它有幾個很大的局限。

　?。?）transition需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時自動發(fā)生。

　?。?）transition是一次性的，不能重復(fù)發(fā)生，除非一再觸發(fā)。

　?。?）transition只能定義開始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)，也就是說只有兩個狀態(tài)。

　?。?）一條transition規(guī)則，只能定義一個屬性的變化，不能涉及多個屬性。

　　CSS Animation就是為了解決這些問題而提出的。

　第二部分：CSS Animation

　　2.1 基本用法

　　首先，CSS Animation需要指定動畫一個周期持續(xù)的時間，以及動畫效果的名稱。

div:hover {
  animation: 1s rainbow;
}

　　上面代碼表示，當(dāng)鼠標(biāo)懸停在div元素上時，會產(chǎn)生名為rainbow的動畫效果，持續(xù)時間為1秒。為此，我們還需要用keyframes關(guān)鍵字，定義rainbow效果。

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

　　上面代碼表示，rainbow效果一共有三個狀態(tài)，分別為起始（0%）、中點（50%）和結(jié)束（100%）。如果有需要，完全可以插入更多狀態(tài)。效果如下。

　　默認(rèn)情況下，動畫只播放一次。加入infinite關(guān)鍵字，可以讓動畫無限次播放。

div:hover {
  animation: 1s rainbow infinite;
}

　　也可以指定動畫具體播放的次數(shù)，比如3次。

div:hover {
  animation: 1s rainbow 3;
}

　　這里還有一個心臟跳動的例子，可供參考。

　　2.2 animation-fill-mode

　　動畫結(jié)束以后，會立即從結(jié)束狀態(tài)跳回到起始狀態(tài)。如果想讓動畫保持在結(jié)束狀態(tài)，需要使用animation-fill-mode屬性。

div:hover {
  animation: 1s rainbow forwards;
}

　　forwards表示讓動畫停留在結(jié)束狀態(tài)，效果如下。

　　animation-fill-mode還可以使用下列值。

（1）none：默認(rèn)值，回到動畫沒開始時的狀態(tài)。

（2）backwards：讓動畫回到第一幀的狀態(tài)。

（3）both: 根據(jù)animation-direction（見后）輪流應(yīng)用forwards和backwards規(guī)則。

　　2.3 animation-direction

　　動畫循環(huán)播放時，每次都是從結(jié)束狀態(tài)跳回到起始狀態(tài)，再開始播放。animation-direction屬性，可以改變這種行為。

　　下面看一個例子，來說明如何使用animation-direction。假定有一個動畫是這樣定義的。

@keyframes rainbow {
  0% { background-color: yellow; }
  100% { background: blue; }
}

　　默認(rèn)情況是，animation-direction等于normal。

div:hover {
  animation: 1s rainbow 3 normal;
}

　　此外，還可以等于取alternate、reverse、alternate-reverse等值。它們的含義見下圖（假定動畫連續(xù)播放三次）。

　　簡單說，animation-direction指定了動畫播放的方向，最常用的值是normal和reverse。瀏覽器對其他值的支持情況不佳，應(yīng)該慎用。

　　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關(guān)鍵字用來定義動畫的各個狀態(tài)，它的寫法相當(dāng)自由。

@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 }
}

　　如果省略某個狀態(tài)，瀏覽器會自動推算中間狀態(tài)，所以下面都是合法的寫法。

@keyframes rainbow {
  50% { background: orange }
  to { background: yellowgreen }
}

@keyframes rainbow {
  to { background: yellowgreen }
}

　　甚至，可以把多個狀態(tài)寫在一行。

@keyframes pound {
  from，to { transform: none; }
  50% { transform: scale(1.2); }
}

　　另外一點需要注意的是，瀏覽器從一個狀態(tài)向另一個狀態(tài)過渡，是平滑過渡。steps函數(shù)可以實現(xiàn)分步過渡。

div:hover {
  animation: 1s rainbow infinite steps(10);
}

　　這里有一個非常神奇的例子，可以看到steps函數(shù)的用處。

　　2.6 animation-play-state

　　有時，動畫播放過程中，會突然停止。這時，默認(rèn)行為是跳回到動畫的開始狀態(tài)。

　　上面動畫中，如果鼠標(biāo)移走，色塊立刻回到動畫開始狀態(tài)。

　　如果想讓動畫保持突然終止時的狀態(tài)，就要使用animation-play-state屬性。

div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}

　　上面的代碼指定，沒有鼠標(biāo)沒有懸停時，動畫狀態(tài)是暫停；一旦懸停，動畫狀態(tài)改為繼續(xù)播放。效果如下。

　　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; }
}

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費用，即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網(wǎng)站建設(shè)。