CSS的過渡效果及動畫效果：transition&animation

最近做了一個全屏分頁滾動效果的頁面，其中運用到一些關於動畫的元素。其實之前對於transition、animation、transform就總是有點混淆，也花過一段時間來研究他們之間具體的區別,但是時隔已久，這次用的時候發現還是有很多屬性不瞭解，因此決定整理一篇關於動畫和過渡的文章。

transition、animation、transform我的理解分別是：過渡、動畫以及變換。因爲前兩者的功能較爲接近，所以在這篇文章裏，我主要整理transition和animation的使用方法。

Transition

1.定義和用法

transition的使用在於讓元素的變化有一個過渡的過程，即可以指定狀態變化所需要的時間。

transition是一個簡寫屬性，用於設置四個過渡屬性：

•  transition-property

規定設置過渡效果的css屬性名稱

1. none 沒有屬性會獲得過渡效果
2. all 所有屬性都獲得過渡效果
3. property 定義應用過渡效果的css屬性名稱列表，列表以逗號分隔

• transition-duration

規定完成過渡效果需要多少秒或毫秒
必須設置，否則時長爲0,則不產生過渡效果

• transition-timing-function

規定過渡效果的速度曲線，默認值爲：ease

1. linear 勻速（等於 cubic-bezier(0,0,1,1)）
2. ease 先加速後減速（等於 cubic-bezier(0.25,0.1,0.25,1)）
3. ease-in 加速（等於 cubic-bezier(0.42,0,1,1)）
4. ease-out 減速（等於 cubic-bezier(0,0,0.58,1)）
5. ease-in-out 等同類似於ease（等於 cubic-bezier(0.42,0,0.58,1)）
6. cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值

• transition-delay

規定過渡效果何時開始，即過渡效果開始前需等待的時間，默認值：0

2.transition的侷限性

• 需要事件觸發

基本結合滑過、點擊、焦點事件使用，無法在網頁加載時自動發生（除非結合js）

• 一次性，不能重複發生，除非一再觸發
• 只能定義開始和結束狀態，不能定義中間狀態，即只有兩個狀態

Animation

1.定義和用法

animation與transition的效果很類似，但是animation可以很好的避免上述所說的transition的侷限性。

animation是一個簡寫屬性，用於設置以下幾個動畫屬性：

• animation- name

爲 @keyframes（關鍵幀） 動畫規定一個名稱

1. none 規定無動畫效果（可用於覆蓋來自級聯的動畫）
2. keyframename規定需要綁定到選擇器的keyframe的名稱

• animation -duration

規定完成動畫所花費的時間
必須設置，否則時長爲0,則沒有動畫效果

• animation -timing-function

規定動畫效果的速度曲線，默認值爲：ease

1. linear 勻速（等於 cubic-bezier(0,0,1,1)）
2. ease 先加速後減速（等於 cubic-bezier(0.25,0.1,0.25,1)）
3. ease-in 加速（等於 cubic-bezier(0.42,0,1,1)）
4. ease-out 減速（等於 cubic-bezier(0,0,0.58,1)）
5. ease-in-out 等同類似於ease（等於 cubic-bezier(0.42,0,0.58,1)）
6. cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值

• animation -delay

規定動畫效果何時開始

• animation –iteration-count

定義動畫的播放次數

1. n 定義動畫播放的數值
2. infinite 規定動畫應該無限次播放

• animation –direction

定義是否輪流反向播放動畫

1. normal 默認值。動畫正常播放
2. alternate動畫應該輪流反向播放

• animation –play-state（目前支持該屬性的瀏覽器較少）

檢索或設置對象動畫的狀態

1. running 默認值。規定動畫正在播放
2. paused規定動畫已暫停

• animation –fill-mode（目前支持該屬性的瀏覽器較少）

檢索或設置對象動畫時間之外的狀態

1. none 默認值。不設置對象動畫之外的狀態（不改變默認行爲）
2. forwards設置對象狀態爲動畫結束時的狀態（在最後一個關鍵幀中定義）
3. backwards 設置對象狀態爲動畫開始時的狀態（在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。）
4. both設置對象狀態爲動畫結束或開始的狀態（向前和向後填充模式都被應用）

本文基本是將W3C的屬性介紹進行了整合，有表述不正確的地方，歡迎指正。

參考網址及延伸閱讀：
Wscschool

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

http://www.zhangxinxu.com/wordpress/?p=1268