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：0.4s;}

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

這個漸進是怎麽來的呢，沒錯就是0.4s，

談及0.4s，就要扯到transition 的各項屬性了

1). 上述的.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.我們看到，按鈕hove 之後，hover 樣式裏所有css描述的變化都具備有transition所描述的動畫。

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

transition: 0.4s background ease-in

　　2） 我們在上面diam中看到了background,是的沒錯，就是因為它指定了動畫中只背景顏色具有動畫。

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

e. 我們在實際項目中會發現，有時候我們需要一個動畫具備一個延遲的展現，不希望他立即就產生動畫，此時transition 的又一個屬性就出來了，transition-delay

transition:0.4s 1s

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

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

1。transition需要一個時間來觸發，比如hover，所以沒發在網頁加載時自動發生。

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

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

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

2.animation

a) 先不詳細解釋 animation的各項屬性了，我們直接來showing代碼

.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).當鼠標移入P的時候，P會發生一系列的樣式改變（截圖無法表現過程）在2秒的世界內完成背景顏色以及寬高的變化，並無限制重復這個兩秒的動畫，我因為什麽呢？

c),我準備做這個解釋，此時你需要做一個animation動畫只需要3點

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

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

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

A. 你可以把這個進程理解成一個函數，@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）剛剛前面我們說了，這段代碼會在鼠標移動P元素後2秒的時間完成背景顏色以及寬度的變化，並無限制重復這兩秒的動畫

*

2018年1月17日總結 css3裏transition 和animation 區別