科技獵CSS3 動畫系列1
10年5月份寫過類似的文章，那時候CSS3 動畫基本上只有webkit內核的瀏覽器，如今CSS3已經大量的被應用到各種項目中，并且逐漸成為前端開發工程師的必備技能。雖然在項目中也經常用CSS3來優化一些體驗，但是總覺的自己掌握的不夠，所以最近溫故知新，總結一下。歡迎大家拍磚討論。
歸納總結了一下，我們口中說的CSS3 動畫包括兩種類型：
- Transition-過渡
- Animation-動畫
他們都使我們的網頁“動”起來了，兩者功能類似，不過兩者存在著一下細微的差別：
Transition（過渡）是通過定義元素從 起點的狀態 和 結束點的狀態 ，在一定的時間區間內實現元素平滑地過渡或變化 的一種補間動畫機制。
而Animation（動畫）不僅可以定義元素從 起點的狀態 和 結束點的狀態，而且他可以定義元素 在任意兩個點之間的關鍵幀（Keyframes）的狀態，在指定的時間內實現元素平滑地過渡或變化 的一種補間動畫機制。
使用transition制作一個簡單的transition效果時，元素包括了起點狀態的屬性和結束點狀態的屬性，一個開始執行動畫時間（transition-delay）和一個延續動作時間（transition-duration）以及動作的變換速率（transition-timing-function），這樣就可以進行一個簡單的動畫了。如果我們要控制的更細一些，比如說我要第一個時間段執行什么動作，第二個時間段執行什么動作，這樣我們用Transition就很難實現了，此時我們需要關鍵幀（Keyframes）來更加精確的控制，在指定的時間內在關鍵幀（Keyframes）之間，實現元素平滑地過渡或變化 。
畫了兩個示意圖：
Transition（過渡）示意圖，1秒時間內只改某元素的顏色：
接下來是Animation（動畫）示意圖，前1秒時間內使元素變大，后2秒改變元素的顏色，并且使元素變為原來的大?。?/div>
其實Transition（過渡）下的?起點 和 結束點也可以理解為關鍵幀，只不過這兩點間不能定義關鍵幀，而Animation可以起點 和 結束點之間定義任意的關鍵幀。至于動畫是在指定的時間內，元素在兩個關鍵幀之間 實現平滑地過渡或變化 的一種補間動畫機制。當如動畫的前提是元素在兩個關鍵幀下狀態存在差異，即使是很小的差異，當然我們的肉眼可能看不出來。
要是你以前做過flash動畫，理解Transition（過渡）和Animation（動畫）應該非常簡單。如果我寫的你理解不了，那么你可以看看這個flash動作補間動畫的視頻教程。
聲明: 本文采用 BY-NC-SA 協議進行授權 | WEB前端開發
轉載請注明轉自《CSS3 動畫系列1-動畫基礎》
本文被轉載1次
首發媒體
| 轉發媒體
隨意打賞
-
評論
微信掃一掃，分享給好友吧。