CSS動(dòng)畫就是通過(guò)CSS （Cascading Style Sheet，層疊樣式表）代碼搭建的網(wǎng)頁(yè)動(dòng)畫。它允許設(shè)計(jì)師和開(kāi)發(fā)人員通過(guò)編輯網(wǎng)站的CSS代碼來(lái)添加頁(yè)面動(dòng)畫，從而輕松取代傳統(tǒng)動(dòng)畫圖片或flash動(dòng)畫的設(shè)計(jì)方式。

transition（過(guò)渡）和animation（動(dòng)畫）是CSS3中的兩種動(dòng)畫屬性。

transition強(qiáng)調(diào)過(guò)渡，是元素的一個(gè)或多個(gè)屬性發(fā)生變化時(shí)產(chǎn)生的過(guò)渡效果，同一個(gè)元素通過(guò)兩個(gè)不同的途徑獲取樣式，而第二個(gè)途徑當(dāng)某種改變發(fā)生（例如hover）時(shí)才能獲取樣式，這樣就會(huì)產(chǎn)生過(guò)渡動(dòng)畫。

animation強(qiáng)調(diào)流程與控制，對(duì)元素的一個(gè)或多個(gè)屬性的變化進(jìn)行控制，可以有多個(gè)關(guān)鍵幀（animation 和@ keyframes結(jié)合使用）。

1．transition 屬性

transition 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置四個(gè)過(guò)渡屬性：

transition-property、transition-duration、transition-timing-function、transition-delay。

（1）transition-duration屬性。

transition-duration 屬性規(guī)定完成過(guò)渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)）。其格式為：

transition-duration: time;

屬性值time規(guī)定完成過(guò)渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)）。默認(rèn)值是 0，意味著不會(huì)有效果。

若想得到動(dòng)畫效果，需要指定transition-duration屬性，否則持續(xù)時(shí)間為0，transition不會(huì)有任何效果。

（2）transition-delay 屬性。

transition-delay 屬性規(guī)定過(guò)渡效果何時(shí)開(kāi)始。其格式為：

transition-delay: time;

屬性值time規(guī)定在過(guò)渡效果開(kāi)始之前需要等待的時(shí)間，以秒或毫秒計(jì)。

（3）transition-property屬性。

transition-property屬性指定CSS屬性的nametransition效果（transition效果時(shí)將會(huì)啟動(dòng)指定的CSS屬性的變化）。其格式為：

transition-property: none |all | property;

其中，屬性值none表示沒(méi)有屬性會(huì)獲得過(guò)渡效果；屬性值all表示所有屬性都將獲得過(guò)渡效果；property   定義應(yīng)用過(guò)渡效果的 CSS 屬性名稱列表，列表以逗號(hào)分隔。

（4）transition-timing-function 屬性。

transition-timing-function屬性指定切換效果的速度。此屬性允許一個(gè)過(guò)渡效果，以改變其持續(xù)時(shí)間的速度。其格式為：

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

各屬性值的功能描述如下：

linear      規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,1,1)）。

ease     規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的過(guò)渡效果（等于cubic-bezier(0.25,0.1,0.25,1)）。

ease-in    規(guī)定以慢速開(kāi)始的過(guò)渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out   規(guī)定以慢速結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out      規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n)     在cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值。

例1  transition 屬性的簡(jiǎn)單應(yīng)用。

先看一個(gè)簡(jiǎn)單的例子，體會(huì)transition 屬性的應(yīng)用。

在頁(yè)面中放置一個(gè)類名為container的層作為效果展示容器，在該層中再定義一個(gè)類名為move-box的層作為應(yīng)用過(guò)渡效果的對(duì)象，HTML代碼描述如下：

為兩個(gè)層定義CSS樣式如下：

.container

{

width: 300px;

height: 200px;

border: 4px solid rgba(255, 0, 0, 0.9);

}

.move-box

{

left:0;

width: 50px;

height: 50px;

position: relative;

background: rgb(0,0,255);

}

這樣，在頁(yè)面中會(huì)顯示如圖1所示的圖形。

圖1  兩個(gè)層在頁(yè)面中的顯示

為.containe層添加鼠標(biāo)懸停樣式規(guī)則，設(shè)置move-box層的left屬性值為250px，這樣當(dāng)鼠標(biāo)懸停在圖1所示的紅色矩形框中，藍(lán)色正方形會(huì)移動(dòng)到紅色矩形框的最右端。

.container:hover .move-box

{

left:250px;

}

但這個(gè)移動(dòng)是瞬時(shí)完成的，沒(méi)有任何過(guò)渡效果，更談不上動(dòng)畫了。為此，需要為這個(gè)移動(dòng)的變化設(shè)置transition屬性。增加樣式規(guī)則如下：

.container .move-box

{

transition-duration: 2s;

}

此時(shí)，可以得到如圖2所示的藍(lán)色小正方形移動(dòng)的動(dòng)畫效果。當(dāng)鼠標(biāo)懸停在紅色矩形框中時(shí)，藍(lán)色小正方形從左向右移動(dòng)；當(dāng)鼠標(biāo)移離時(shí)，藍(lán)色小正方形從右向左移動(dòng)。

圖2 藍(lán)色小正方形移動(dòng)：雙向過(guò)渡效果

完整的HTML代碼如下。

transition 屬性的簡(jiǎn)單應(yīng)用

View Code

在這個(gè)例子中，在.container .move-box 中設(shè)置了過(guò)渡動(dòng)畫完成的時(shí)間為2秒鐘（transition-duration: 2s;），這樣在left屬性變化時(shí)會(huì)產(chǎn)生過(guò)渡動(dòng)畫效果，而這種效果的產(chǎn)生有兩種途徑：一種是鼠標(biāo)在container上懸停， move-box的樣式從默認(rèn)樣式到.container:hover的樣式，left屬性發(fā)生了變化，觸發(fā)了過(guò)渡效果； 一種是鼠標(biāo)移離container層，move-box的樣式從.container:hover的樣式回到默認(rèn)樣式，left也變化了，因此也產(chǎn)生了過(guò)渡效果。這兩個(gè)方向上的過(guò)渡都是平滑不突兀的。

若將.container .move-box樣式定義中的transition-duration: 2s;移到.container:hover .move-box中，并刪除.container .move-box樣式定義，如下：

.container:hover .move-box

{

left:250px;    

transition-duration: 2s;

}

此時(shí)，過(guò)渡動(dòng)畫是單一方向上的，當(dāng)鼠標(biāo)在container上懸停時(shí)， move-box的樣式從默認(rèn)樣式到.container:hover的樣式，left屬性發(fā)生了變化，觸發(fā)了過(guò)渡效果； 當(dāng)鼠標(biāo)移離container層，move-box的樣式從.container:hover的樣式回到默認(rèn)樣式，left也變化了，但此時(shí)不是過(guò)渡動(dòng)畫的方式，而是直接回到默認(rèn)，看上去比較突兀和生硬。效果如圖3所示。

圖3  藍(lán)色小正方形移動(dòng)：?jiǎn)我环较蛏嫌羞^(guò)渡效果

例1中的過(guò)渡動(dòng)畫效果是通過(guò)改變動(dòng)畫元素的left屬性，從而使得元素的位置發(fā)生改變而得到的。為了對(duì)選定元素進(jìn)行更多的變換，可以應(yīng)用transform屬性。

transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個(gè)屬性允許將元素旋轉(zhuǎn)、縮放、移動(dòng)、傾斜等。其基本使用格式為：

transform: none|transform-functions;

其中，屬性值none表示不進(jìn)行轉(zhuǎn)換；屬性值transform-functions表示所采用的轉(zhuǎn)換函數(shù)，可應(yīng)用的轉(zhuǎn)換函數(shù)和功能描述如下：

matrix(n,n,n,n,n,n)   定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)     定義 3D 轉(zhuǎn)換，使用16個(gè)值的4x4矩陣。

translate(x,y)          定義 2D 平移轉(zhuǎn)換。

translate3d(x,y,z)       定義 3D 平移轉(zhuǎn)換。

translateX(x)           定義X 軸平移轉(zhuǎn)換

translateY(y)           定義Y 軸平移轉(zhuǎn)換

translateZ(z)           定義 Z 軸3D 平移轉(zhuǎn)換

scale(x[,y])             定義 2D 縮放轉(zhuǎn)換。

scale3d(x,y,z)           定義 3D 縮放轉(zhuǎn)換。

scaleX(x)             通過(guò)設(shè)置 X 軸的值來(lái)定義縮放轉(zhuǎn)換。

scaleY(y)             通過(guò)設(shè)置 Y 軸的值來(lái)定義縮放轉(zhuǎn)換。

scaleZ(z)             通過(guò)設(shè)置 Z 軸的值來(lái)定義 3D 縮放轉(zhuǎn)換。

rotate(angle)           定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。

rotate3d(x,y,z,angle)      定義 3D 旋轉(zhuǎn)。

rotateX(angle)         定義沿著 X 軸的 3D 旋轉(zhuǎn)。   

rotateY(angle)         定義沿著 Y 軸的 3D 旋轉(zhuǎn)。

rotateZ(angle)         定義沿著 Z 軸的 3D 旋轉(zhuǎn)。

skew(x-angle,y-angle)    定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。

skewX(angle)          定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。

skewY(angle)          定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。

perspective(n)         為 3D 轉(zhuǎn)換元素定義透視視圖。

例如，transform: translate(50px,100px);表示元素從左邊移動(dòng)50個(gè)像素，并從頂部移動(dòng)100像素。

將例1中.container:hover .move-box的定義修改為：

.container:hover .move-box

{

transform: translate(250px,0);

}

或

.container:hover .move-box

{

transform: translateX(250px);

}

同樣可以實(shí)現(xiàn)如圖2所示的頁(yè)面效果。但transform屬性的設(shè)置更靈活。

例如，將例1中.container:hover .move-box的定義修改為：

.container:hover .move-box

{

transform: translate(250px,150px);

}

則可得到如圖4所示的動(dòng)畫效果。此時(shí)，藍(lán)色小正方形在水平和垂直方向上都發(fā)生了平移。

圖4  藍(lán)色小正方形沿對(duì)角線平移

再如，將例1中.container:hover .move-box的定義修改為：

.container:hover .move-box

{

transform:  rotate(45deg) translateX(200px);

}

則可得到如圖5所示的動(dòng)畫效果。

圖5  藍(lán)色小正方形旋轉(zhuǎn)并平移

例2  圖片的平移、縮放和旋轉(zhuǎn)變換。

在頁(yè)面中放置一個(gè)類名為container的層作為效果展示容器，在該層中再定義一個(gè)9個(gè)子層，每個(gè)子層中放置一幅圖片，為圖片添加鼠標(biāo)懸停變換效果，當(dāng)鼠標(biāo)懸停在某幅圖片上時(shí)，該圖片或平移、或縮放、或旋轉(zhuǎn)。編寫完整的HTML代碼如下。

圖片的平移、縮放和旋轉(zhuǎn)變換

View Code

在瀏覽器中打開(kāi)保存上述HTML代碼的html文件，在瀏覽器中呈現(xiàn)出如圖6所示的變換效果（部分示例）。

圖6  圖片旋轉(zhuǎn)

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

（1）transition需要事件觸發(fā)，所以沒(méi)法在網(wǎng)頁(yè)加載時(shí)自動(dòng)發(fā)生。例1和例2都是采用偽選擇器hover，在鼠標(biāo)懸停時(shí)產(chǎn)生動(dòng)畫效果。

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

（3）transition只能定義開(kāi)始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)，也就是說(shuō)只有兩個(gè)狀態(tài)。例如，例1中的藍(lán)色小正方形只能沿一條指定的路線移動(dòng)。若想讓藍(lán)色小正方形沿著上下左右邊界轉(zhuǎn)圈移動(dòng)，transition屬性就沒(méi)法做到。

CSS Animation就是為了解決這些問(wèn)題而提出的。

2．a(chǎn)nimation 屬性

animation 屬性是六個(gè)動(dòng)畫屬性的簡(jiǎn)寫屬性，這6個(gè)屬性是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction。

（1）animation-name屬性。

animation-name 屬性為 @keyframes 動(dòng)畫規(guī)定名稱。其格式為：

animation-name: keyframename|none;

其中，屬性值keyframename規(guī)定需要綁定到選擇器的keyframe的名稱。屬性值none規(guī)定無(wú)動(dòng)畫效果（可用于覆蓋來(lái)自級(jí)聯(lián)的動(dòng)畫）。

（2）animation-duration屬性。

animation-duration 屬性定義動(dòng)畫完成一個(gè)周期所需要的時(shí)間，以秒或毫秒計(jì)。其格式為：  animation-duration: time;

（3）animation-timing-function屬性。

animation-timing-function屬性規(guī)定動(dòng)畫的速度曲線。速度曲線用于，使變化更為平滑。其格式為：

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

各屬性值的功能描述如下：

linear          動(dòng)畫從頭到尾的速度是相同的。

ease         默認(rèn)。動(dòng)畫以低速開(kāi)始，然后加快，在結(jié)束前變慢。

ease-in        動(dòng)畫以低速開(kāi)始。

ease-out       動(dòng)畫以低速結(jié)束。

ease-in-out      動(dòng)畫以低速開(kāi)始和結(jié)束。

cubic-bezier(n,n,n,n)     在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳菑?0 到 1 的數(shù)值。

（4）animation-delay屬性。

animation-delay 屬性定義動(dòng)畫什么時(shí)候開(kāi)始。其格式為：

animation-delay: time;

屬性值time單位可以是秒（s）或毫秒（ms）。并且time允許負(fù)值，-2s 使動(dòng)畫馬上開(kāi)始，但跳過(guò) 2 秒進(jìn)入動(dòng)畫。

（5）animation-iteration-count屬性。

animation-iteration-count 屬性定義動(dòng)畫的播放次數(shù)。其格式為：

animation-iteration-count: n|infinite;

其中，屬性值n定義動(dòng)畫播放次數(shù)的數(shù)值；屬性值infinite規(guī)定動(dòng)畫應(yīng)該無(wú)限次播放。

（6）animation-direction屬性。

animation-direction屬性規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。其格式為：

animation-direction: normal|reverse|alternate|alternate-reverse;

其中，屬性值normal表示以正常的方式播放動(dòng)畫；reverse   以相反方向播放動(dòng)畫；alternate  播放動(dòng)畫時(shí)，每奇數(shù)時(shí)間（1,3,5…）正常播放，每偶數(shù)時(shí)間（2,4,6…）反方向播放； alternate-reverse播放動(dòng)畫時(shí)，每奇數(shù)時(shí)間（1,3,5…）反方向播放，每偶數(shù)時(shí)間（2,4,6…）正常播放。

例3  沿著容器邊框轉(zhuǎn)圈移動(dòng)的藍(lán)色小正方形。

修改例1中的效果，使得藍(lán)色小正方形可以沿著上邊框、右邊框、下邊框和左邊框循環(huán)轉(zhuǎn)圈。編寫HTML文件如下。

沿邊框四周移動(dòng)的小正方形

View Code

在瀏覽器中打開(kāi)保存上述HTML代碼的html文件，在瀏覽器中呈現(xiàn)出如圖7所示的動(dòng)畫效果。

圖7  沿四周循環(huán)轉(zhuǎn)圈的小正方形

如在上面CSS定義的“animation:myfirst 5s infinite;”語(yǔ)句后，再加上一條語(yǔ)句“animation-direction:alternate;” ，則得到如圖8所示的動(dòng)畫效果，與圖7的不同之處在于，偶數(shù)運(yùn)動(dòng)周期時(shí)，小正方形的移動(dòng)方向沿著“左邊框-->下邊框-->右邊框-->上邊框”。

圖8  沿四周循環(huán)轉(zhuǎn)圈的小正方形

需要說(shuō)明的是：Internet Explorer 10、Firefox 以及 Opera 等支持 animation 屬性，Safari 和 Chrome 支持替代的 -webkit-animation 屬性，而Internet Explorer 9 以及更早的版本不支持 animation 屬性。因此，從瀏覽器兼容性的角度出發(fā)，在例3的HTML文件的CSS定義中可加上如下定義：

@-webkit-keyframes myfirst

{

0%    { left:0px; top:0px;}

25%   { left:250px; top:0px;}

50%   { left:250px; top:150px;}

75%   { left:0px; top:150px; }

100%  { left:0px; top:0px;}

} 

例4  圖片的縮放、旋轉(zhuǎn)和傾斜動(dòng)畫。

在頁(yè)面中放置一個(gè)類名為container的層作為效果展示容器，在該層中再定義一個(gè)4個(gè)子層，每個(gè)子層中放置一幅圖片，為每幅圖片添加動(dòng)畫效果，第1幅圖片縮小后放大，第2幅圖片繞X軸翻轉(zhuǎn)，第3幅圖片沿Z軸旋轉(zhuǎn)，第4幅圖片傾斜。編寫完整的HTML代碼如下。

圖片的縮放、旋轉(zhuǎn)和傾斜變換

View Code

在瀏覽器中打開(kāi)保存上述HTML代碼的html文件，在瀏覽器中呈現(xiàn)出如圖9所示的動(dòng)畫效果。

圖9  圖片的縮放、旋轉(zhuǎn)和傾斜動(dòng)畫

例5  旋轉(zhuǎn)的文字。

在頁(yè)面中放置一個(gè)類名為container的層作為效果展示容器，在該層中再定義一個(gè)3個(gè)子層，每個(gè)子層中放置一個(gè)漢字，為每個(gè)漢字所在的層添加動(dòng)畫效果，第1個(gè)漢字水平翻轉(zhuǎn)，第2個(gè)漢字繞中心旋轉(zhuǎn)，第3個(gè)漢字垂直翻轉(zhuǎn)。編寫完整的HTML代碼如下。

歡樂(lè)頌

歡

樂(lè)

頌    View Code

在瀏覽器中打開(kāi)保存上述HTML代碼的html文件，在瀏覽器中呈現(xiàn)出如圖10所示的動(dòng)畫效果。

圖10  漢字的旋轉(zhuǎn)

例6  旋轉(zhuǎn)的風(fēng)車。

預(yù)先準(zhǔn)備好一張風(fēng)車的圖片，在頁(yè)面中放置一個(gè)類名為container的層作為效果展示容器，將風(fēng)車圖片作為該層的背景圖片。鼠標(biāo)懸停在層上時(shí)，風(fēng)車旋轉(zhuǎn)，鼠標(biāo)移離，風(fēng)車停止旋轉(zhuǎn)。編寫完整的HTML代碼如下。

旋轉(zhuǎn)的風(fēng)車

View Code

在瀏覽器中打開(kāi)保存上述HTML代碼的html文件，在瀏覽器中呈現(xiàn)出如圖11所示的動(dòng)畫效果。

圖11  旋轉(zhuǎn)的風(fēng)車

例7  方和圓。

實(shí)現(xiàn)方形變換為圓形，編寫HTML代碼如下。

方和圓

View Code

在瀏覽器中打開(kāi)保存上述HTML代碼的html文件，在瀏覽器中呈現(xiàn)出如圖12所示的動(dòng)畫效果。

圖12  方和圓的變換