CSS3 動畫系列1

Web前端開發 ? 11年前掃碼分享

我是創始人李巖：很抱歉！給自己產品做個廣告，點擊進來看看。

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次

首發媒體

| 轉發媒體