CSS3 動畫系列1-動畫基礎

日期：2013-11-22  來源：攀枝花惠康網絡公司

10年5月份寫過近似的文章，那時辰CSS3 動畫根基上只有webkit內核的瀏覽器，現在CSS3已經年夜量的被應用到各類項目中，而且逐漸成為前端開發工程師的必備手藝。雖然在項目中也經常用CSS3濫暌古化一些體驗，可是總覺的自己把握的不夠，所以比來溫故知新，總結一下。接待巨匠拍磚談判。

歸納總結了一下，我們口中說的CSS3 動畫搜羅兩種類型：

1. Transition-過渡
2. Animation-動畫

他們都使我們的網頁“動”起來了，兩者功能近似，不外兩者存在著一下細微的分歧： Transition（過渡）是經由過程界聳ё侏素年夜 起點的狀況 和 竣事點的狀況 ，在必然的時刻區間內實現元素滑膩地過渡或轉變 的一種補間動畫機制。 而Animation（動畫）不僅可以界聳ё侏素年夜 起點的狀況 和 竣事點的狀況，而且他可以界聳ё侏素 在肆意兩個點之間的關頭幀（Keyframes）的狀況，在指定的時刻內實現元素滑膩地過渡或轉變 的一種補間動畫機制。 使用transition建造一個簡單的transition效不美觀時，元素搜羅了起點狀況的屬性和竣事點狀況的屬性，一個起頭執步履畫時刻（transition-delay）和一個延續動作時刻（transition-duration）以及動作的變換速度（transition-timing-function），這樣就可以進行一個簡單的動畫了。如不美觀我們要節制的更細一些，好比說我要第一個時刻段執行什么動作，第二個時刻段執行什么動作，這樣我們用Transition就很難實現了，此時我們需要關頭幀（Keyframes）來加倍切確的節制，在指定的時刻內在關頭幀（Keyframes）之間，實現元素滑膩地過渡或轉變 。 畫了兩個示意圖： Transition（過渡）示意圖，1秒時刻內只改某元素的顏色：

 

接下來是Animation（動畫）示意圖，前1秒時刻內使元素變年夜，后2秒改變元素的顏色，而且使元素變為原本的巨細： 其實Transition（過渡）下的 起點 和 竣事點也可以理解為關頭幀，只不外這兩點間不能界說關頭幀，而Animation可以起點 和 竣事點之間界說肆意的關頭幀。至于動畫是在指定的時刻內，元素在兩個關頭幀之間 實現滑膩地過渡或轉變 的一種補間動畫機制。當如動畫的前提是元素在兩個關頭幀下狀況存在差異，即使是很小的差異，當然我們的肉眼可能看不出來。 若是你以前做過flash動畫，理解Transition（過渡）和Animation（動畫）應該很是簡單。如不美觀我寫的你理解不了，那么你可以看看這個flash動作補間動畫的視頻教程。