懵懂少年有幸受邀參加3.30中國第五屆CSS大會分享，感謝業界大咖的不嫌棄，鑒于CSS的更新頻率不及JS各種迭代高，新的特性組織起來對于分享的主題會比較散，所以我選擇了一個關于動畫時間的分享主題，基于大家熟悉的屬性提煉出新的用法與思維，用于引導WEB側動畫的制作。

如大家所熟悉的，CSS動畫里面，最常用的動畫屬性，非Transition、Animation莫屬，而時間屬性，逃不過Duration（動畫時間）、Delay（延遲時間），官方的屬性定義是：

Duration : 定義動畫完成一個周期需要多少秒或毫秒。

Delay : 定義動畫什么時候開始。

一般我比較偏向于用Animation制作動畫，一般性寫法為：

第1個0.3s 為動畫時間，第2個0.3s為延遲時間，可參考下面盒子平移動畫：

動畫描述：盒子豎直移動，從下到上，移動40px。動畫時間軸如下：

基于一般性動畫用After Effect里面的K幀手法，對動畫關鍵幀進行分割，得到盒子彈跳動畫如下：

動畫描述：盒子彈跳運動，從下到上，幅度40px。

動畫關鍵幀keyframes如下：

具體動畫keyframes代碼:

該動畫從0-100，K6幀，0%保持原始狀態，20%做一個擠壓的預備動作，40%向上彈跳40px并且做拉伸狀，60%回落原地為下次反彈做擠壓蓄力，80%反彈再次拉伸，最后100%回落原點保持原始狀態與0%呼應。

單元素的動畫，可以通過調整關鍵幀來實現，但多元素互動的需求更為日常，比如，要讓3個盒子有序的進行波浪彈跳動畫，可以通過加長每個動畫的時間長度來實現，具體動畫效果效果如下：

animation寫法如下：

動畫時間軸如下：

但通過加長時間長度的方式來實現波浪彈跳盒子，由于時間長度存在時間差，會導致動畫循環 infinite波浪會錯亂，效果如下：

解決的方法，是通過延遲delay的方式制造時間差，讓動畫循環時間統一，從而實現循環波浪彈跳動畫，效果如下：

animation寫法如下：

動畫時間軸如下：

元素之間動畫時間可以存在關系，同樣，元素之間，動作也會存在關系，通過彼此相互作用產生互動，讓元素動畫更加生動，比如 雙盒彈跳聯動，效果如下：

這個動畫實例抽樣，是平時制作CSS動畫較常見的一種關鍵點呼應的制作手法， animation寫法如下：

動畫關鍵幀軸如下：

動畫關鍵幀keyframes如下：

bottom藍色盒子在0%~75%進行彈跳動畫，75%~100%保持靜止狀態

up紅色盒子則是在0%~75%進行1次起跳后，在45%到達最高點，75%回落原點，90% 2次起跳，100%保持原始狀態。?

兩個盒子在0%~75%這個區間內，關鍵幀保持一致，達到動作呼應的效果。

同樣用于制作元素之間相互用的交互動畫，還有一種關鍵點順接的制作手法，大致效果如下：

animation寫法如下：

動畫關鍵幀keyframes如下：

bottom藍色盒子其實是不動的，動的是外部容?，容器在0%~50%進行彈跳動畫，50%~100%保持靜止狀態

up紅色盒子則是在0%~50%保持靜止狀態，在50%~100%進行彈跳動畫

兩個動畫，關鍵幀順接拼接構成一個整體動畫，從而達到與呼應不同的視覺效果。

下面再看綜合性實例例：Ipengoo，一個H5首頁，整體效果如下：

重點放在主體星球，郵筒以及怪奇鵝Ipengoo上，主要html結構如下：

星球及郵筒動畫如下：

?

Animation寫法如下：

星球延遲0.8s進場，動畫時間0.6s ，入場動畫總1.4s結束后，進行5s為周期的星球浮動循環動畫； 郵筒則是延遲1.2s在星球即將結束入場動畫時出現，動畫時間0.3s，入場后處于靜止狀態，保持在入場動畫是100%位置，延遲2.9s后，執行動畫時間為1.2s的循環動畫，注意這里郵筒的變換原點transform-origin是在48% 100%位置，即水平方向的中間靠左，垂直方向的底部，不修改的話，是在元素中心點50% 50%處，元素執行動畫的時候，會以中心往上下彈動，所以需要修改變換中心點讓郵筒以該點為動畫變換中心，從下往上運動，穩住腳跟。

而郵筒的mouse則是后續在制作怪奇鵝手臂附屬動畫的時候添加上的，目的是增加郵筒與怪奇鵝的互動，所以時間是做了延遲2.8s的處理，跟怪奇鵝的循環動畫開始時間呼應，同樣動畫循環的時間是1.2s，而這里的transform-origin則是設置在50% 5%的位置，即 水平方向中間點，垂直方向頂部，動畫呈現的效果是，嘴巴下巴一張一合，想要吃怪奇鵝手里的郵件。

右邊Ipengoo的動畫如下：

Animation寫法如下：

怪奇鵝是延遲1.6s出現，即郵筒出現之后，入場動畫1.2s，2.8s入場動畫完成后，進行動畫時間1.2s 的循環動畫，變換原點跟郵筒同理，設置在底部中間位置，目的是讓怪奇鵝貼著地面彈跳。手與郵件動畫時間跟怪奇鵝主體動畫時間保持一致，這里則是用到我《CSS3 動畫》課程里面動畫十四原則講到的附屬動作，對比下面動畫：

? ? ??? ?

上面的是單純怪奇鵝主體動畫，下面的則是添加了怪奇鵝手部與郵件的附屬動作，對比之下，下面的動畫會顯得更加夸張且生動，這也就是有時候會發現，為什么做的動畫會顯得很“硬”不自然的緣故，因為缺少了一些細節，主體動畫需要附屬動畫的承托，才會顯得更加自然生動。

附屬動畫關鍵幀對比如下：

動畫關鍵幀keyframes如下：

主體動畫是分5個關鍵幀，但是附屬動畫關鍵幀，不一定要完全跟主題動畫一致，只要動畫節奏感一致即可，這里我在怪奇鵝的主體動畫運動后，附屬動畫壓后5%處理，讓附屬動畫視覺上存在一些慣性。而變換上，主要是做旋轉處理，變換原點是在怪奇鵝手臂上，讓怪奇鵝的手拿著郵件，產生一定幅度的搖擺動畫，從而強化襯托出主體的運動幅度。

而眼睛則是在怪奇鵝完成入場動畫后，進行動畫時間3s的循環動畫，這里沒有太多必要讓眼睛動畫跟主體動畫保持時間一致，可以適當給予一點隨機感。 左邊的怪奇鵝與右邊的整體一致，只不過延遲1.8s入場，兩只怪奇鵝錯開0.2s，避免同時左右入場，讓用戶視線混亂，但是循環動畫時間保持一致，兩只怪奇鵝，其實可以理解為兩個波浪彈跳盒子。

主體星球，郵筒以及主?角怪奇鵝的入場循環時間軸如下：

每一個動畫場景，都會有一條與之對應的時間軸，軸上的元素，入場延遲，入場動畫時間，循環動畫延遲，循環動畫時間，都需要有規劃的安排好，元素與元素之間是存在著呼應，還是順接關系，需要在規劃的時候理清，這樣再多元素，也可以讓動畫有序進行，創造出整體動畫的節奏感。

那一直連續的動畫循環，是否合適？看下面的動畫：

動畫關鍵幀keyframes如下：

怪奇鵝的動畫關鍵幀在0%~80%之間，是出于運動狀態，但是80%~100%，是處于靜止狀態，讓動畫處于動畫時間20%的短暫停頓，因為連續的動畫會讓用戶眼睛產生視覺疲勞，需要適當的停頓，與預備動作類似，讓用戶能夠有休息思考的時間。

CSS動畫可以通過時間關鍵幀的操作制造出節奏感，那能不能制造出隨機感呢？

不用JS，單純用CSS就可以制作小顆粒掉落反彈的隨機感，html結構很簡單，只需要8個標簽作為載體，通過時間與延遲控制來實現，html結構如下：

動畫關鍵幀keyframes如下：

drop_1的關鍵幀拆分，從0%~50%是粒子從上往下掉落，50%~53%接觸到弧形表面，出現短暫緩沖停頓，53%~70%呈向上反彈，并且同時出現水平方向的X向量，向左移動，85%~100%粒子透明度從1~0，慢慢消失，drop_2的關鍵幀分拆跟drop_1一致，唯一不同的是，反彈后出現的X軸向量，是跟drop_1是反向的，因為粒子掉落在弧面兩邊后，反彈角度是一左一右的，完成關鍵幀拆分后，究竟隨機感是怎么通過時間實現呢？

Animation寫法如下：

通過錯開各個粒子的延遲時間，讓粒子開始動畫的時間分散，等出現初始的隨機后，粒子循環時間也進行時間長度的隨機，其實這里就是波浪盒子時間延長處理方法的另一處應用，具體可以參考粒子循環時間軸如下：

從上面這張循環時間軸圖，我們可以看到，粒子之間由于動畫時長不一致，會讓所有粒子循環動畫的結束與開始，在短時間內都不會對齊到一條線上，除非是各粒子動畫時長的最小公倍數，而在這最小公倍數時間內，各粒子的掉落對于用戶而言，可以理解為隨機的。

另外一個隨機的粒子，可以參考雪花飄落的效果，也是用同樣的手法，制造的隨機感：

很多時候，會感覺動畫節奏感有點慢，或者太快了，具體的時間怎么去恒定？有沒有一個時間的基數作為參考呢？

每個小球，從左到右，動畫時間分別是0.1s、0.2s、0.3s、0.4s、0.5s，0.1s會讓人感覺太快了，而0.5s則是相反，感覺太慢了，0.2s~0.4s區間視覺上會比較舒適，可以通過下圖，加深下理解：

圖片摘自《UI動效基本規則總結》

0.2s~0.4s還是比較感性的參考，理性一點的話，可以參考 《Material Design》里面關于動畫時間的分析。

?在移動端過渡時長，基準是300ms，即0.3s，根據情況可做如下調整：

幅度大、復雜的、全屏過渡動畫可能需要更長的持續時間，可以長達 375ms

元素進入屏幕需要的時長為 225ms

元素離開屏幕需要的時長為 195ms

超過 400ms 的過渡動畫可能會感覺太慢。

在平板上，過渡時長會比手機上長30%。

在可穿戴設備，過渡時長會比手機上的短30%。

具體動畫時間在各個設備上的時間體現，參考如下：

感謝大家能耐心瀏覽到這，感謝CSS大會的主辦方邀請以及騰訊技術工程公眾號的約稿，以下為本次分享的文章大綱：

常用屬性

? ? ? ?——移動盒子

K幀分配

? ? ? ——彈跳盒子

時間延長

? ? ? ?——波浪彈跳盒子

順序延遲?

? ? ? ?——循環波浪彈跳盒子

節奏感

? ? ? ?——聯動呼應彈跳雙盒子

? ? ? ?——聯動順接彈跳雙盒子

? ? ? ?——Ipengoo 企鵝動畫分析

隨機感?

? ? ? ? ? ? ? ——粒子下降反彈實例

? ? ? ? ? ? ? ——雪花飄落實例

? ? 7. 時長衡定?

? ? ? ? ? ? ? ——0.3S分水嶺

? ? ? ? ? ? ? ——多終端的時長基數

如果想要了解更多Ipengoo的信息，可以關注下面?怪奇鵝IPENGOO公眾號：

總結

以上是生活随笔為你收集整理的中国第五届CSS大会分享：CSS TIME的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。