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