CSS3動畫包括過渡動畫和關(guān)鍵幀動畫，它們主要通過改變CSS屬性值來模擬實現(xiàn)。我將詳細介紹Transform、Transitions和Animations 3大功能模塊，其中Transform實現(xiàn)對網(wǎng)頁對象的變形操作，Transitions實現(xiàn)CSS屬性過渡變化，Animations實現(xiàn)CSS樣式分步式演示效果。

1、CSS3變形

2012年9月，W3C發(fā)布CSS3變形工作草案。這個草案包括CSS3 2D變形和CSS3 3D變形。CSS 2D Transform獲得各主流瀏覽器的支持，CSS 3D Transform支持程度不是很完善。本節(jié)重點講解2D變形，有關(guān)3D變形可以參考我的其它帖子。

1.1、設(shè)置原點

CSS變形的原點默認為對象的中心點(50% 50%)，使用transform-origin屬性可以重新設(shè)置新的變形原點。語法格式如下所示：

    transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?

取值簡單說明如下：

• <percentage>：用百分比指定坐標值，可以為負值。
• <length>：用長度值指定坐標值，可以為負值。
• left：指定原點的橫坐標為left。
• center①：指定原點的橫坐標為center。
• right：指定原點的橫坐標為right。
• top：指定原點的縱坐標為top。
• center②：指定原點的縱坐標為center。
• bottom：指定原點的縱坐標為bottom。

【示例】通過重置變形原點，可以設(shè)計不同的變形效果。以圖像的右上角為原點逆時針旋轉(zhuǎn)圖像45度：

    <style type="text/css">img {                                    /* 固定兩幅圖像相同大小和相同顯示位置 */position: absolute;left: 20px;top: 10px;width: 170px;width: 250px;}img.bg {                                 /* 設(shè)置第1幅圖像作為參考 */opacity: 0.3;border: dashed 1px red;}img.change {                             /* 變形第2幅圖像 */border: solid 1px red;transform-origin: top right;         /* 以右上角為原點進行變形*/transform: rotate(-45deg);           /* 逆時針旋轉(zhuǎn)45度*/}</style><img class="bg" src="images/1.jpg"><img class="change" src="images/1.jpg">

比較效果如下圖所示：

1.2、2D旋轉(zhuǎn)

rotate()函數(shù)能夠在2D空間內(nèi)旋轉(zhuǎn)對象，語法格式如下：

    rotate(<angle>)

其中，參數(shù)angle表示角度值，取值單位可以是：度，如90deg（90度，一圈360度）；梯度，如100 grad（相當于90度，360度等于400 grad）；弧度，如1.57 rad（約等于90度，360度等于2π）；圈，如0.25 turn（等于90度，360度等于1 turn）。

【示例】以上節(jié)示例為基礎(chǔ)，按默認原點逆時針旋轉(zhuǎn)圖像45度：

    img.change {border: solid 1px red;transform: rotate(-45deg);}

效果如下圖所示：

1.3、2D縮放

scale()函數(shù)能夠縮放對象大小，語法格式如下：

    scale(<number>[, <number>])

該函數(shù)包含兩個參數(shù)值，分別用來定義寬和高的縮放比例。取值簡單說明如下：

• 如果取值為正數(shù)，則基于指定的寬度和高度將放大或縮小對象。
• 如果取值為負數(shù)，則不會縮小元素，而是翻轉(zhuǎn)元素（如文字被反轉(zhuǎn)），然后再縮放元素。
• 如果取值為小于1的小數(shù)（如0.5）可以縮小元素。
• 如果第二個參數(shù)省略，則第二個參數(shù)等于第一個參數(shù)值。

【示例】繼續(xù)以上節(jié)示例為基礎(chǔ)，按默認原點把圖像縮小1/2：

    img.change {border: solid 1px red;transform: scale(0.5);}

1.4、2D平移

translate()函數(shù)能夠平移對象的位置，語法格式如下：

    translate(<translation-value>[, <translation-value>])

該函數(shù)包含兩個參數(shù)值，分別用來定義對象在x軸和y軸相對于原點的偏移距離。如果省略參數(shù)，則默認值為0。如果取負值，則表示反向偏移，參考原點保持不變。

【示例】設(shè)計向右下角方向平移圖像，其中x軸偏移150px，y軸偏移50px：

    img.change {border: solid 1px red;transform: translate(150px, 50px);}

1.5、2D傾斜

skew()函數(shù)能夠傾斜顯示對象，語法格式如下：

    skew(<angle> [, <angle>])

該函數(shù)包含兩個參數(shù)值，分別用來定義對象在x軸和y軸傾斜的角度。如果省略參數(shù)，則默認值為0。與rotate()函數(shù)不同，rotate()函數(shù)只是旋轉(zhuǎn)對象的角度，而不會改變對象的形狀；skew()函數(shù)會改變對象的形狀。

【示例】使用skew()函數(shù)變形圖像，x軸傾斜30度，y軸傾斜20度：

    img.change {border: solid 1px red;transform: skew(30deg, 20deg);}

效果如下圖所示：

1.6、2D矩陣

matrix()是一個矩陣函數(shù)，它可以同時實現(xiàn)縮放、旋轉(zhuǎn)、平移和傾斜操作，語法格式如下：

    matrix(<number>, <number>, <number>, <number>, <number>, <number>)

該函數(shù)包含6個值，具體說明如下：

• 第1個參數(shù)控制x軸縮放。
• 第2個參數(shù)控制x軸傾斜。
• 第3個參數(shù)控制y軸傾斜。
• 第4個參數(shù)控制y軸縮放。
• 第5個參數(shù)控制x軸平移。
• 第6個參數(shù)控制y軸平移。

【示例】使用matrix()函數(shù)模擬：

    img.change {border: solid 1px red;transform: matrix(1, 0.6, 0.2, 1, 0, 0);}

提示：多個變形函數(shù)可以在一個聲明中同時定義。例如：

    div {transform: translate(80, 80);transform: rotate(45deg);transform: scale(1.5, 1.5);}

針對上面樣式，可以簡化為：

    div { transform: translate(80, 80) rotate(45deg) scale(1.5, 1.5);}

2、過渡動畫

2013年2月，W3C發(fā)布CSS Transitions工作草案，這個草案描述了CSS過渡動畫的基本實現(xiàn)方法和屬性，目前獲得所有瀏覽器的支持。

2.1、設(shè)置過渡屬性

transition-property屬性定義過渡動畫的CSS屬性名稱，基本語法如下所示：

    transition-property:none | all | [ <IDENT> ] [ ‘,’ <IDENT> ]*;

取值簡單說明如下：

• none：表示沒有元素。
• all：默認值，表示針對所有元素，包括:before和:after偽元素。
• IDENT：指定CSS屬性列表。幾乎所有色彩、大小或位置等相關(guān)的CSS屬性，包括許多新添加的CSS3屬性都可以應(yīng)用過渡，如CSS3變換中的放大、縮小、旋轉(zhuǎn)、斜切、漸變等。

【示例】指定動畫的屬性為背景顏色。這樣當鼠標經(jīng)過盒子時，會自動從紅色背景過渡到藍色背景：

    <style type="text/css">div {margin: 10px auto; height: 80px;background: red;border-radius: 12px;box-shadow: 2px 2px 2px #999;}div:hover {background-color: blue;/*指定動畫過渡的CSS屬性*/transition-property: background-color;}</style><div></div>

2.2、設(shè)置過渡時間

transition-duration屬性定義轉(zhuǎn)換動畫的時間長度，基本語法如下所示：

    transition-duration:<time> [, <time>]*;

其中，初始值為0，適用于所有元素，以及:before和:after偽元素。在默認情況下，動畫過渡時間為0 s，當指定元素動畫時，會看不到過渡的過程，而直接看到結(jié)果。

【示例】以上節(jié)示例為例，設(shè)置動畫過渡時間為2 s，當鼠標移過對象時，會看到背景色從紅色逐漸過渡到藍色：

    div:hover {background-color: blue;/*指定動畫過渡的CSS屬性*/transition-property: background-color;/*指定動畫過渡的時間*/transition-duration:2s;}

2.3、設(shè)置延遲過渡時間

transition-delay屬性定義開啟過渡動畫的延遲時間，基本語法如下所示：

    transition-delay:<time> [, <time>]*;

其中，初始值為0，適用于所有元素，以及:before和:after偽元素。設(shè)置時間可以為正整數(shù)、負整數(shù)和零。非零的時候必須設(shè)置單位是s（秒）或者ms（毫秒）；為負數(shù)的時候，過渡的動作會從該時間點開始顯示，之前的動作被截斷；為正數(shù)的時候，過渡的動作會延遲觸發(fā)。

【示例】繼續(xù)以上節(jié)示例為基礎(chǔ)進行介紹，設(shè)置過渡動畫推遲2s后執(zhí)行，則當鼠標移過對象時，會看不到任何變化，過了2 s之后，才發(fā)現(xiàn)背景色從紅色逐漸過渡到藍色。

    div:hover {background-color: blue;/*指定動畫過渡的CSS屬性*/transition-property: background-color;/*指定動畫過渡的時間*/transition-duration: 2s;/*指定動畫延遲觸發(fā) */transition-delay: 2s;}

2.4、設(shè)置過渡動畫類型

transition-timing-function屬性定義過渡動畫的類型，基本語法如下所示：

    transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubicbezier(<number>, <number>, <number>, <number>)
[, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>,<number>, <number>)]*

屬性初始值為ease，取值簡單說明如下：

• ease：平滑過渡，等同于cubic-bezier(0.25, 0.1, 0.25, 1.0)函數(shù)，即立方貝塞爾。
• linear：線性過渡，等同于cubic-bezier(0.0, 0.0, 1.0, 1.0)函數(shù)。
• ease-in：由慢到快，等同于cubic-bezier(0.42, 0, 1.0, 1.0)函數(shù)。
• ease-out：由快到慢，等同于cubic-bezier(0, 0, 0.58, 1.0)函數(shù)。
• ease-in-out：由慢到快再到慢，等同于cubic-bezier(0.42,0, 0.58, 1.0)函數(shù)。
• cubic-bezier：特殊的立方貝塞爾曲線效果。

【示例】繼續(xù)以上節(jié)示例為基礎(chǔ)進行介紹，設(shè)置過渡類型為線性效果，代碼如下所示：

    div:hover {background-color: blue;/*指定動畫過渡的CSS屬性*/transition-property: background-color;/*指定動畫過渡的時間*/transition-duration: 10s;/*指定動畫過渡為線性效果 */transition-timing-function: linear;}

2.5、設(shè)置過渡觸發(fā)動作

CSS3過渡動畫一般通過動態(tài)偽類觸發(fā)，如下表所示：

也可以通過JavaScript事件觸發(fā)，包括click、focus、mousemove、mouseover、mouseout等。

1、:hover

最常用的過渡觸發(fā)方式是使用:hover偽類。

【示例1】設(shè)計當鼠標經(jīng)過div元素時，該元素的背景顏色會在經(jīng)過1 s的初始延遲后，于2 s內(nèi)動態(tài)地從綠色變?yōu)樗{色。

    <style type="text/css">div {margin: 10px auto;height: 80px;border-radius: 12px;box-shadow: 2px 2px 2px #999;background-color: red;transition: background-color 2s ease-in 1s;}div:hover { background-color: blue}</style><div></div>

2、:active

:active偽類表示用戶單擊某個元素并按住鼠標按鈕時顯示的狀態(tài)。

【示例2】設(shè)計當用戶單擊div元素時，該元素被激活，這時會觸發(fā)動畫，高度屬性從200px過渡到400px。如果按住該元素，保持活動狀態(tài)，則div元素始終顯示400px高度，松開鼠標之后，又會恢復(fù)到原來的高度：

    <style type="text/css">div {margin: 10px auto;border-radius: 12px;box-shadow: 2px 2px 2px #999;background-color: #8AF435;height: 200px;transition: width 2s ease-in;}div:active {height: 400px;}</style><div></div>

3、: focus

:focus偽類通常會在表單對象接收鍵盤響應(yīng)時出現(xiàn)。

【示例3】當輸入框獲取焦點時，輸入框的背景色逐步高亮顯示，如下圖所示：

    <style type="text/css">label {display: block;margin: 6px 2px;}input[type="text"], input[type="password"] {padding: 4px;border: solid 1px #ddd;transition: background-color 1s ease-in;}input:focus { background-color: #9FFC54;}</style><form id=fm-form action="" method=post><fieldset><legend>用戶登錄</legend><label for="name">姓名<input type="text" id="name" name="name" ></label><label for="pass">密碼<input type="password" id="pass" name="pass" ></label></fieldset></form>

提示：把:hover偽類與:focus配合使用，能夠豐富鼠標用戶和鍵盤用戶的體驗。

4、:checked

:checked偽類在發(fā)生選中狀況時觸發(fā)過渡，取消選中則恢復(fù)原來的狀態(tài)。

【示例4】設(shè)計當復(fù)選框被選中時緩慢縮進2個字符：

    <style type="text/css">label.name {display: block;margin: 6px 2px;}input[type="text"], input[type="password"] {padding: 4px;border: solid 1px #ddd;}input[type="checkbox"] { transition: margin 1s ease;}input[type="checkbox"]:checked { margin-left: 2em;}</style><form id=fm-form action="" method=post><fieldset><legend>用戶登錄</legend><label class="name" for="name">姓名<input type="text" id="name" name="name" ></label><p>技術(shù)專長<br><label><input type="checkbox" name="web" value="html" id="web_0">HTML</label><br><label><input type="checkbox" name="web" value="css" id="web_1">CSS</label><br><label><input type="checkbox" name="web" value="javascript" id="web_2">JavaScript</label><br></p></fieldset></form>

演示效果：

5、媒體查詢

觸發(fā)元素狀態(tài)變化的另一種方法是使用CSS3媒體查詢。

【示例5】設(shè)計div元素的寬度和高度為49%×200px，如果用戶將窗口大小調(diào)整到420px或以下，則該元素將過渡為100%×100px。也就是說，當窗口寬度變化經(jīng)過420px的閾值時，將會觸發(fā)過渡動畫：

    <style type="text/css">div {float: left; margin: 2px;width: 49%; height: 200px;background: #93FB40;border-radius: 12px;box-shadow: 2px 2px 2px #999;transition: width 1s ease, height 1s ease;}@media only screen and (max-width : 420px) {div {width: 100%;height: 100px;}}</style><div></div><div></div>

6、JavaScript事件

【示例6】可以使用純粹的CSS偽類觸發(fā)過渡，為了方便用戶理解，這里通過jQuery腳本觸發(fā)過渡：

    <script type="text/javascript" src="images/jquery-1.10.2.js"></script><script type="text/javascript">$(function() {$("#button").click(function() {$(".box").toggleClass("change");});});</script><style type="text/css">.box {margin:4px;background: #93FB40;border-radius: 12px;box-shadow: 2px 2px 2px #999;width: 50%; height: 100px;transition: width 2s ease, height 2s ease;}.change { width: 100%; height: 120px;}</style><input type="button" id="button" value="觸發(fā)過渡動畫" /><div class="box"></div>

在文檔中包含一個box類的盒子和一個按鈕，當單擊按鈕時，jQuery腳本會將盒子的類切換為change，從而觸發(fā)過渡動畫：

上面演示了樣式發(fā)生變化會導(dǎo)致過渡動畫，也可以通過其他方法觸發(fā)這些更改，包括通過JavaScript腳本動態(tài)更改。從執(zhí)行效率來看，事件通常應(yīng)當通過JavaScript觸發(fā)，簡單動畫或過渡則應(yīng)使用CSS觸發(fā)。

3、幀動畫

2012年4月，W3C發(fā)布CSS Animations工作草案，在這個草案中描述了CSS關(guān)鍵幀動畫的基本實現(xiàn)方法和屬性。目前主流瀏覽器都支持CSS幀動畫。

3.1、設(shè)置關(guān)鍵幀

CSS3使用@keyframes定義關(guān)鍵幀，具體用法如下所示：

    @keyframes animationname {keyframes-selector {css-styles;}}

其中參數(shù)說明如下：

• animationname：定義動畫的名稱。
• keyframes-selector：定義幀的時間位置，也就是動畫時長的百分比，合法的值包括：0～100%、from（等價于0）、to（等價于100%）。
• css-styles：表示一個或多個合法的CSS樣式屬性。

在動畫設(shè)計過程中，用戶能夠多次改變CSS樣式，以百分比定義樣式改變發(fā)生的時間，或者通過關(guān)鍵詞from和to。為了獲得最佳瀏覽器支持，設(shè)計關(guān)鍵幀動畫時，應(yīng)該始終定義0和100%位置幀。最后，為每幀定義動態(tài)樣式，同時將動畫與選擇器綁定。

【示例】演示讓一個小方盒沿著方形框內(nèi)壁勻速運動：

    <style>#wrap {                                    /* 定義運動軌跡包含框*/position:relative;                     /* 定義定位包含框，避免小盒子跑到外面運動*/border:solid 1px red;width:250px; height:250px;}#box {                                     /* 定義運動小盒的樣式*/position:absolute;left:0; top:0;width: 50px; height: 50px;background: #93FB40;border-radius: 8px;box-shadow: 2px 2px 2px #999;/*定義幀動畫：名稱為ball，動畫時長5s，動畫類型為勻速漸變，動畫無限播放*/animation: ball 5s linear infinite;}/*定義關(guān)鍵幀：共包括5幀，分別在總時長為0、25%、50%、75%、100%的位置*//*每幀中設(shè)置動畫屬性為left和top，讓它們的值勻速漸變，產(chǎn)生運動動畫*/@keyframes ball {0 {left:0;top:0;}25% {left:200px;top:0;}50% {left:200px;top:200px;}75% {left:0;top:200px;}100% {left:0;top:0;}}</style><div id="wrap"><div id="box"></div></div>

3.2、設(shè)置動畫屬性

Animations功能與Transition功能相同，都是通過改變元素的屬性值實現(xiàn)動畫效果。它們的區(qū)別在于：使用Transitions功能時只能通過指定屬性的開始值與結(jié)束值，然后以在這兩個屬性值之間進行平滑過渡的方式實現(xiàn)動畫效果，因此不能實現(xiàn)比較復(fù)雜的動畫效果；而Animations功能則通過定義多個關(guān)鍵幀以及定義每個關(guān)鍵幀中元素的屬性值實現(xiàn)更為復(fù)雜的動畫效果。

1.定義動畫名稱

使用animation-name屬性可以定義CSS動畫的名稱，語法如下所示：

    animation-name:none | IDENT [, none | IDENT ]*;

其中，初始值為none，定義一個適用的動畫列表。每個名字用來選擇動畫關(guān)鍵幀，提供動畫的屬性值。如名稱是none，就不會有動畫。

2.定義動畫時間

使用animation-duration屬性可以定義CSS動畫的播放時間，語法如下所示。

    animation-duration:<time> [, <time>]*;

在默認情況下，該屬性值為0，這意味著動畫周期為0，即不會有動畫。當值為負值時，則被視為0。

3.定義動畫類型

使用animation-timing-function屬性可以定義CSS動畫類型，語法如下所示。

    animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubicbezier(<number>, <number>, number>, <number>) [,
ease | linear |ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>,<number>, <number>)]*

初始值為ease，取值說明可參考上面介紹的過渡動畫類型。

4.定義延遲時間

使用animation-delay屬性可以定義CSS動畫延遲播放的時間，語法如下所示：

    animation-delay:<time> [, <time>]*;

該屬性允許一個動畫開始執(zhí)行一段時間后才被應(yīng)用。當動畫延遲時間為0，即默認動畫延遲時間，則意味著動畫將盡快執(zhí)行，否則該值指定將延遲執(zhí)行的時間。

5.定義播放次數(shù)

使用animation-delay屬性可以定義CSS動畫延遲播放的時間，語法如下所示：

    animation-delay:<time> [, <time>]*;

該屬性允許一個動畫開始執(zhí)行一段時間后才被應(yīng)用。當動畫延遲時間為0，即默認動畫延遲時間，則意味著動畫將盡快執(zhí)行，否則該值指定將延遲執(zhí)行的時間。

6.定義播放方向

使用animation-direction屬性定義CSS動畫的播放方向，基本語法如下所示。

    animation-direction:normal | alternate [, normal | alternate]*;

默認值為normal。當為默認值時，動畫的每次循環(huán)都向前播放。另一個值是alternate，設(shè)置該值則表示第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。

7.定義播放狀態(tài)

使用animation-play-state屬性定義動畫正在運行還是暫停，語法如下所示：

    animation-play-state: paused|running;

初始值為running。其中，paused定義動畫已暫停，running定義動畫正在播放。

提示：可以在JavaScript中使用該屬性，這樣就能在播放過程中暫停動畫。在JavaScript腳本中用法如下。

8.定義播放外狀態(tài)

使用animation-fill-mode屬性定義動畫播放外狀態(tài)，語法如下所示。

    animation-fill-mode：none | forwards | backwards | both [ , none | forwards | backwards | both ]*

初始值為none，如果提供多個屬性值，以逗號進行分隔。取值說明如下：

• none：不設(shè)置對象動畫之外的狀態(tài)。
• forwards：設(shè)置對象狀態(tài)為動畫結(jié)束時的狀態(tài)。
• backwards：設(shè)置對象狀態(tài)為動畫開始時的狀態(tài)。
• both：設(shè)置對象狀態(tài)為動畫結(jié)束或開始的狀態(tài)。

【示例】設(shè)計一個小球，并定義它水平向左運動，動畫結(jié)束之后，再返回起始點位置：

    <style>/*啟動運動的小球，并定義動畫結(jié)束后返回*/.ball{width: 50px; height: 50px;background: #93FB40;border-radius: 100%;box-shadow:2px 2px 2px #999;animation:ball 1s ease backwards;}/*定義小球水平運動關(guān)鍵幀*/@keyframes ball{0%{transform:translate(0,0);}100%{transform:translate(400px);}}</style><div class="ball"></div>

效果如下圖所示：