css 3動畫

標籤：常見   http   pos   bic   pause   one   use   back   需要   

詳細 ： http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

第一部分：CSS Transition

transition的作用在於，指定狀態變化所需要的時間。

img{    transition: 1s;}

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

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

img{    transition: 1s height;}

這樣一來，只有height的變化需要1秒實現，其他變化（主要是width）依然瞬間實現，

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

img{    transition: 1s height, 1s width;}//這樣一來，height和width的變化是同時進行的

我們希望，讓height先發生變化，等結束以後，再讓width發生變化。實現這一點很容易，就是為width指定一個delay參數。

img{    transition: 1s height, 1s 1s width;}// 讓height先發生變化，等結束以後，再讓width發生變化

• 動畫效果

transition的狀態變化速度（又稱timing function），預設不是勻速的，而是逐漸放慢，這叫做ease。

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

（1）linear：勻速（2）ease-in：加速（3）ease-out：減速（4）cubic-bezier函數：自訂速度模式

•  transition的局限

transition的優點在於簡單易用，但是它有幾個很大的局限。

（1）transition需要事件觸發，所以沒法在網頁載入時自動發生。

（2）transition是一次性的，不能重複發生，除非一再觸發。

（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。

（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

第二部分：CSS Animation

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

div:hover {  animation: 1s rainbow;}

上面代碼錶示，當滑鼠移至上方在div元素上時，會產生名為rainbow的動畫效果，期間為1秒。為此，我們還需要用keyframes關鍵字，定義rainbow效果

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

預設情況下，動畫只播放一次。加入infinite關鍵字，可以讓動畫無限次播放

div:hover {  animation: 1s rainbow infinite;}
//也可以指定動畫具體播放的次數，比如3次

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

2.2 animation-fill-mode  保持結束狀態

動畫結束以後，會立即從結束狀態跳回到起始狀態。如果想讓動畫保持在結束狀態，需要使用animation-fill-mode屬性。

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

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

（1）none：預設值，回到動畫沒開始時的狀態。（2）backwards：讓動畫回到第一幀的狀態。（3）both: 根據animation-direction（見後）輪流應用forwards和backwards規則。

2.4 animation的各項屬性

div:hover {  animation: 1s 1s rainbow linear 3 forwards normal;}
// 最後一項可以是 normal reserve 常見的兩種，指定了東環播放的方向。

2.6 animation-play-state

有時，動畫播放過程中，會突然停止。這時，預設行為是跳回到動畫的開始狀態

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

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

上面的代碼指定，沒有滑鼠沒有懸停時，動畫狀態是暫停；一旦懸停，動畫狀態改為繼續播放。效果如下。

css 3動畫