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

transition（過渡）和animation（動畫）是CSS3中的兩種動畫屬性,。

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

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

1．transition 屬性

transition 屬性是一個簡寫屬性，用于設(shè)置四個過渡屬性：

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

（1）transition-duration屬性,。

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

transition-duration: time;

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

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

（2）transition-delay 屬性,。

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

transition-delay: time;

屬性值time規(guī)定在過渡效果開始之前需要等待的時間,，以秒或毫秒計,。

（3）transition-property屬性。

transition-property屬性指定CSS屬性的nametransition效果（transition效果時將會啟動指定的CSS屬性的變化）,。其格式為：

transition-property: none |all | property;

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

（4）transition-timing-function 屬性,。

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

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

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

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

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

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

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

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

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

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

先看一個簡單的例子,，體會transition 屬性的應(yīng)用,。

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

為兩個層定義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);

}

這樣,，在頁面中會顯示如圖1所示的圖形。

圖1  兩個層在頁面中的顯示

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

.container:hover .move-box

{

left:250px;

}

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

.container .move-box

{

transition-duration: 2s;

}

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

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

完整的HTML代碼如下,。

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

View Code

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

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

.container:hover .move-box

{

left:250px;    

transition-duration: 2s;

}

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

圖3  藍(lán)色小正方形移動：單一方向上有過渡效果

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

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

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)換,，使用六個值的矩陣,。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)     定義 3D 轉(zhuǎn)換，使用16個值的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)             通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換。

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

scaleZ(z)             通過設(shè)置 Z 軸的值來定義 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);表示元素從左邊移動50個像素,，并從頂部移動100像素。

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

.container:hover .move-box

{

transform: translate(250px,0);

}

或

.container:hover .move-box

{

transform: translateX(250px);

}

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

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

.container:hover .move-box

{

transform: translate(250px,150px);

}

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

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

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

.container:hover .move-box

{

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

}

則可得到如圖5所示的動畫效果,。

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

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

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

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

View Code

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

圖6  圖片旋轉(zhuǎn)

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

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

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

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

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

2．a(chǎn)nimation 屬性

animation 屬性是六個動畫屬性的簡寫屬性，這6個屬性是animation-name,、animation-duration,、animation-timing-function、animation-delay,、animation-iteration-count和animation-direction,。

（1）animation-name屬性。

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

animation-name: keyframename|none;

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

（2）animation-duration屬性,。

animation-duration 屬性定義動畫完成一個周期所需要的時間，以秒或毫秒計,。其格式為：  animation-duration: time;

（3）animation-timing-function屬性,。

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

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

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

linear          動畫從頭到尾的速度是相同的。

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

ease-in        動畫以低速開始,。

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

ease-in-out      動畫以低速開始和結(jié)束,。

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

（4）animation-delay屬性,。

animation-delay 屬性定義動畫什么時候開始,。其格式為：

animation-delay: time;

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

（5）animation-iteration-count屬性,。

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

animation-iteration-count: n|infinite;

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

（6）animation-direction屬性。

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

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

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

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

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

沿邊框四周移動的小正方形

View Code

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

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

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

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

需要說明的是：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)和傾斜動畫,。

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

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

View Code

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

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

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

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

歡樂頌

歡

樂

頌    View Code

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

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

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

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

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

View Code

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

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

例7  方和圓,。

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

方和圓

View Code

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

圖12  方和圓的變換