最初接觸頁面元素動畫是jquery的animate函數,這個函數結合其他jquery方法基本可以滿足各種動畫需求。但隨着css的快速發展,不用javascript同樣也可以做出絢麗的動畫效果。css3中可以設置動畫效果的屬性有兩個:Transition和Animation,下面就簡單介紹一些這兩個屬性的使用。
（01）transition相對簡單，只需要指定以下幾個屬性即可。transition-property: 參與過渡的屬性,比如 height、width等css樣式，所有樣式用關鍵字“all”，沒有樣式需要過渡使用“none”。transition-duration: 過渡持續的時間，單位是秒（s）,比如 width從100px過渡到200排序需要的時間。transition-timing-function: 過渡的動畫類型，有以下幾種取值。linear：線性過渡，等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)。ease：平滑過渡，等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)。ease-in：由慢到快，等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)。ease-out：由快到慢，等同於貝塞爾曲線(0, 0, 0.58, 1.0)。ease-in-out：由慢到快再到慢，等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)。cubic-bezier(<number>, <number>, <number>, <number>)：特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內。transition-delay: 動畫延遲執行的時間。-------------------transition樣式的寫法---------------------transition同background屬性一樣有縮寫和拆分兩種方式，就是説你可以把每個屬性都加到transition後，如 transition: border-color .5s ease-in .1s;也可以把這些屬性拆分，分別設置在個屬性之後，上邊的縮寫拆分後如下：transition-property: border-color;transition-duration: .5s;transition-timing-function: ease-in;transition-delay: .1s;如果需要對個樣式設置過渡動畫，可以用逗號分開，縮寫如：transition: border-color .5s ease-in .1s，color .3s ease .2s;拆分寫法如：transition-property: border-color, color;transition-duration: .5s, .3s;transition-timing-function: ease-in, ease;transition-delay: .1s, .2s;拆分寫法中如果某個屬性是多組共用的，則不需要分別設置，比如：transition-duration: .5s, .5s; ---> transition-duration: .5s;但是transition有幾個很大的侷限。（1）transition需要事件觸發，所以沒法在網頁加載時自動發生。（2）transition是一次性的，不能重複發生，除非一再觸發。（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是説只有兩個狀態。（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。所以就誕生了animation屬性，相對transition略顯複雜，但是功能更強大。
（02）animation與transition有幾個相同的屬性，duration、timing-function、delay。animation-name：animation需要指定動畫的名字，這個是用來在@keyframes中指定執行動畫的樣式。animation-durarion：動畫的執行時間，單位s（秒）。animation-timing-function：動畫類型，取值與transition相同。animation-delay：動畫延遲時間，單位s（秒）。animation-iteration-count：動畫執行的次數，這個屬性就客服了transition侷限中的第二條，取值可以是數字指定具體循環幾次，也可以設置關鍵字“infinite”無限循環。animation-direction：動畫在循環執行時是否反方向，取值“normal”正常方向、“alternate”正常與反向交替。animation-play-state：設置執行中動畫的狀態，取值“running”、“paused”。animation-fill-mode：設置動畫執行時間之外的狀態，取值“none”（默認，不設置）、forwards（動畫結束時的狀態）、“backwards”（動畫開始時的狀態）、“both”（開始或結束時的狀態）。動畫中的每個屬性都介紹完畢之後，其實你應該還是一頭霧水，這怎麼可能產生動畫，關鍵在於@keyframes中。----------------------------@keyframes-----------------------------給一個例子：@keyframes rainbow {from { background: #c00 }50% { background: orange }to { background: yellowgreen }}用百分比的形式表示一個動畫週期中的各個狀態，其中0%、100%可以分別用from、to表示，每個百分點的狀態可以當做一個css class，可以設置多個樣式哦，rainbow 就是animation-name的值。-------------------------------END------------------------------------至此CSS3的兩種動畫設置方式就簡略的介紹完了。
酷知知識幫
