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;
 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秒動畫結束后就會是這樣：

看看兩者區別：

Transition作用是指定了某一個屬性（如width、left、transform等）在兩個值之間如何過渡，他包括transition-property、transition-duration、transition-timing-function、transition-delay等。 如果某一個元素指定了Transiton，那么當其某個屬性改變的時候就會按照Transition指定的方式進行過渡，動畫就這么產生了。 Animation也是通過指定某一個屬性（如width、left、transform等）在兩個值之間如何過渡來實現動畫的，與Transition不同的是，Animation可以通過keyframe顯式控制當前幀的屬性值，而Transition只能隱式來進行（不能指定每幀的屬性值），所以相對而言Animation的功能更加靈活。另外一個區別是Animation通過模擬屬性值改變來實現動畫，動畫結束之后元素的屬性沒有變化；而Transition確實改變了元素的屬性值，動畫結束之后元素的屬性發生了變化；這一點，這在實際應用中會產生很大的區別，也決定了二者各有春秋。 Animation模塊包括了animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-play-state等屬性。 其實說這么多，一句話就是：Transform和width、left一樣，定義了元素很多靜態樣式，只不過通過Transition和Animation指定如何改變不同的屬性值，才實現了動畫。

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的區別與聯系的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。