關於css3裡的transition和animation

標籤：開始   背景顏色   應該   ansi   btn   預設   運行   自訂   展現   

** 做了很久的項目了，transition和animation兩個css3屬性經常被用到實際項目當中，想想把它整理出來。如下：

 

1：先介紹transition：

a，在做項目中經常會遇見這樣的情景，比如一個按鈕，當滑鼠移入進去的時候改變按鈕背景顏色以及字型顏色，此時我們一般會這麼做：

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;} 

.btn:hover{background:green;color:white;}

 

b，我們會發現背景以及字型顏色是瞬間改變的，是不是會顯得特別生硬呢

此時transition就登場了，見代碼：

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;} .btn:hover{background:green;color:white;transition：.4s;}

 

c，加入transition後我們會發現按鈕背景顏色以及字型顏色具備一個時間漸進的過程，直至結束。

這個漸進是怎麼來的呢，沒錯，就是.4s,(簡寫,為0.4s，

談及0.4s，就要扯到transition的各項屬性了，在此我不打算細緻地都寫進部落格來，因為是完全可以自己查閱資料的。

（1：上述的0.4s是transition其中一個屬性的簡寫： transition-duration

 transition-duration 顧名思義，表示動畫持續的時間，也就是上面的0.4s了。在0.4秒的時間中完成背景顏色以及字型顏色的動畫。

（2：涉及到0.4秒中持續的動畫，我們就要談及物體運動的快慢了，我們知道一個事物所具備的運動具有這幾種：

　　　  （a  linear：勻速

　　　  （b  ease-in：加速

　　　  （c  ease-out：減速

　　  　（d  cubic-bezier函數：自訂速度模式（幾乎不用）

 

上面代碼中就簡簡單單唯寫了transition：0.4s;為什麼具備有一個運動呢？

（3：是這樣子的，transition有一個屬性叫做transition-timing-function，預設是ease，它運動的形式是逐漸放慢的。

不簡寫就是 transition: 0.4s ease

 

d，我們看到，按鈕hover之後，hover樣式裡所有css描述的變化都具備有transition所描述的動畫。

這句話我解釋的有點繞口，我們直接上代碼解釋吧：

1）若是只想讓背景顏色具備一個時間段的變化，我們該怎麼做呢？

transition: 0.4s background ease-in

2）我們在上面這句代碼中看到了background，是的沒錯，就是因為它指定了動畫中只背景顏色具備這個時間段的動畫。

它是transition其中一個屬性的簡寫，叫做：transition-property，顧名思義，指定屬性。

 

e，我們在實際項目中會發現，有時候我們需要一個動畫具備有一個延遲的展現，不希望他立即就產生動畫

此時，transition的又一個屬性就出來了，transition-delay

見代碼：

transition: 0.4s 1s;

我們會發現，此時這個按鈕的背景字型動畫是在1秒鐘之後才開始的。

 

----》   transition雖然簡單好用，但是我們會發現它受到各種限制。

1：transition需要一個事件來觸發，比如hover，所以沒法在網頁載入時自動發生

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

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

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

 

（為了表達清晰，上述4條限制是我引用阮一峰大神部落格裡的簡介）

 

為了突破這些限制，animation出來了。

 

2：animation：

 a）,先不詳細解釋animation的各項屬性了，直接來看代碼吧

　　　　 .c{width: 100px;height: 100px;margin: 200px 0 300px 300px;background: orange; }        .c:hover{animation: 2s change infinite;}        @keyframes change {            0% { background: orange; }            50% { background: pink;width: 200px; }            100% { background: red;height: 300px; }        }

 

 上面的代碼會產生這樣的效果，見：

b），當滑鼠移入div的時候，div會發生一系列的樣式改變（無法表現過程），在2秒的時間完成背景顏色以及寬高的變化，並無限制重複這個兩秒的動畫，是因為什麼呢？

 

 c），我準備作這樣的解釋，此時，你需要做一個animation動畫只需要3點

 1. 需要一個承載動畫的元素，如div

 2. 當前的元素寫一個animation的css，其中定義你所需要這個動畫產生的效果。（你暫時不需要知道如何編寫這個動畫內部的css）

 3. 編寫一個動畫進程，以@keyframes關鍵字來定義，而這個動畫的進程有一個名字，如change，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　----------》你可以把這個進程理解成一個函數，@keyframes對應的就是function，而change對應的就是函數名字-----------》最終等待被調用。

 

 好了，明白了以上三點，我們就可以來剖析animation的廬山真面目了。

 

 a）我們接著再來看這段代碼：

animation: 2s change infinite;　　　　@keyframes change {       0% { background: orange; }       50% { background: pink;width: 200px; }       100% { background: red;height: 300px; }}

 

1. 我們先來看這個“所謂的函數change”

　　　　(1):這個change是animation其中的一個屬性，叫做動畫名字-----》 animation-name:change;

2. 我們再來看這個“百分比”

　　　  (1):這個百分比你只要理解它是這個這個動畫在多少時間內完成的一系列樣式改變的進度。這個進度你可以描繪這個元素你想改變的的樣式屬性（可以定義多種）

　　　  (2):當然也可以這樣寫：

@keyframes change {            from { background: orange; }            50% { background: pink;width: 200px; }            to { background: red;height: 300px; }}

 

 3.看完了動畫製作的過程，現在我們來看如何調用這個動畫：見代碼：

.c:hover{animation: 2s change infinite;}

 （1），機智的你肯定看到了2s，是的沒錯，就是它讓動畫2秒完成。和transition一樣，它是animation的一個屬性，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　叫做：animation-duration: 2s;

 （2），機智的你肯定看到了change,是的沒錯，就是如此調用這個“動畫函數”的.只需要在當前元素animation的css樣式裡寫入就可以了。

 

  （3），剛剛前面我們說了，這段代碼會在滑鼠移入div元素後2秒的時間完成背景顏色以及寬高的變化，並無限制重複這個兩秒的動畫

　　　　 *：注意看到無限制三個字，

　　　　 *：無限制怎麼來的呢？此時這段代碼只剩下infinite了。

　　　　  *：不用想，他也是animation其中之一屬性：叫做 animation-iteration-count: infinite;

　　　　  *：這個屬性是用來定義這個動畫應該播放多少次，infinite代表的無限制（無數次），當然你也可以在讓它播放一個定值的數次，比如3次

animation-iteration-count: 3;

 在這裡，你只需要在animation裡的css裡寫入次數就可以了：

.c:hover{animation: 2s change 3;}

 

 

 4：這個動畫雖然已經介紹完了，但是我們會發現動畫在兩秒鐘後又會恢複原樣（初始狀態）：

此時我們想讓動畫兩秒執行完畢之後保持在結束狀態，這該怎麼辦了，此時animation的另一個屬性就派上用場了

                                                                        -------------》animation-fill-mode:forwards;

在這裡，你只需要在animation裡的css裡寫入forwards就可以了：

.c:hover{animation: 2s change 3 forwards;}

2秒動畫結束後就會是這樣：

 

 

 

 5：同樣的，animation也和transition一樣具備延時動畫的屬性：

　　　　　　　　　　　　　　　　　　　　------------》animation-delay: 1s;

同樣的animation簡寫寫法如下,代表滑鼠移入div內，1秒後動畫開始

.c:hover{animation: 2s 1s change 3 forwards;}

 

6：同樣的，animation也和transition一樣具備動畫以何種速度呈現的屬性：預設是ease，它運動的形式是逐漸放慢的。

　　　　　　　　　　　　　　　　------------------》animation-timing-function: ease;

　　　　

　　　  （a  linear：勻速

　　　  （b  ease-in：加速

　　　  （c  ease-out：減速

　　  　（d  cubic-bezier函數：自訂速度模式（幾乎不用）

 

****要改變運動形勢只要添加相應的速度代表參數了，見代碼：

.c:hover{animation: 2s 1s change 3 forwards linear;}

 

7:animation還有一個屬性我就不打算細寫了，--------》animation-direction，預設情況下是normal，

　　它是用來改變動畫播放不僅只可以從結束狀態跳回到起始狀態這種形式。

 

8：上面說過，animation瀏覽器一載入便可以自動觸發：

.c{width: 100px;height: 100px;margin: 200px 0 300px 300px;background: orange; animation: 2s change forwards;}

** 此時你會發現，瀏覽器一運行這個div就開始動畫了。至於什麼時候觸發，那就要看項目具體需求了。

 

結語：自此，css3中的兩大動畫transition和animation就介紹完了。如有錯誤，歡迎指正。如果此文對你有所協助, 請不要吝嗇你的贊哦~

 

關於css3裡的transition和animation