實際上，很多時候我們需要讓每個動作停頓一會，而不會閃動太快。如“嘀卡萌風(fēng)騷亂舞”的動畫，每個動作都需要定格一會，這個時候我們需要給每個動作分配一些停留幀數(shù)。
Step3，添加停留幀 (總節(jié)點數(shù) = 動作數(shù) * 2)
0%　　　　?%　　　　　?%　　　　　?%　　　　 ?%　　　　100%

停留x幀　　過渡y幀　　　停留x幀　　過渡y幀　　　停留x幀

└───────┴────────┴────────┴───────┴───────┘

動作1　　　 　　　　　　動作2　　　　　　　　　　動作3

這下就復(fù)雜了，不過我們仔細(xì)分析，會發(fā)現(xiàn)它們之間有一定的規(guī)律。

3x + 2y = 100

動作個數(shù) = 3       停留幀個數(shù) = 3      過渡幀個數(shù) = 2
設(shè)動作個數(shù)為n，則
動作個數(shù) = n       停留幀個數(shù) = n      過渡幀個數(shù) = n-1
然后，我們可以得出一個公式

nx + (n-1)y = 100

接下來我們可以有規(guī)則性的嘗試動畫參數(shù)了，我們嘗試讓每個動作停留20幀，通過公式求得動作過渡幀數(shù)y也等于20，于是得出我們的幀數(shù)代碼

1. .demo{animation:anim-name 1s infinite;}  /* 單向循環(huán) */

3. @keyframes anim-name{

4.     0%, 20%{  /* 動作1 */  }

5.     40%, 60%{  /* 動作2 */  }

6.     80%, 100%{  /* 動作3 */  }

7. }

復(fù)制代碼

有了公式，我們就不用瞎嘗試?yán)?，可以少死點腦細(xì)胞了
雙向循環(huán)動畫
示例要求：實現(xiàn)一個3個動作的雙向循環(huán)動畫
復(fù)制上面的動畫代碼，加個 animation-direction: alternate; 屬性不就好了？
(哦，不對，按照心理學(xué)反推論，如果這么簡單，作者有必要另起篇幅嗎？肯定有陰謀！)
不用猜了，我就是有陰謀！
繼續(xù)線段圖示，當(dāng)我們加入 animation-direction: alternate; 屬性之后的效果是

問題：首尾動作從第二遍播放開始會重復(fù)停留時間！
這個并不是我們期望看到的效果，不過解決方法也很簡單

通過線段圖分析

2x + 2y = 100

動作個數(shù) = 3       停留幀個數(shù) = 2         過渡幀個數(shù) = 2
設(shè)動作個數(shù)為n，則
動作個數(shù) = n       停留幀個數(shù) = n-1     過渡幀個數(shù) = n-1
然后，我們可以得出一個公式

(n-1)(x+y) = 100

接下來我們還是嘗試讓每個動作停留20幀，通過公式求得動作過渡幀數(shù)y等于30，于是得出我們的幀數(shù)代碼

1. .demo{animation:anim-name 1s infinite alternate;} /* 雙向循環(huán) */

3. @keyframes anim-name{

4.     0%, 10%{  /* 動作1 */  }

5.     40%, 60%{  /* 動作2 */  }

6.     90%, 100%{  /* 動作3 */  }

7. }

復(fù)制代碼

注意：雙向循環(huán)動畫，首尾動作停留幀要各減一半，示例的首尾動作停留幀為10 (20/2=10)
細(xì)心的同學(xué)會發(fā)現(xiàn)，其實這里還有點小瑕疵，那就是
問題：第一次播放的第一個動作只停了一半時間！
有時我們做動作銜接，一定要所有動作時間都保持一致。解決辦法也不是沒有，可以給動畫加個延遲時間 animation-delay 屬性，時長等于動作停留時間的一半，如何計算時長后面會講到。
除了加延時解決這個問題之外，還有一個偽方法，請繼續(xù)往下看
模擬雙向循環(huán)動畫
示例要求：實現(xiàn)一個3個動作的雙向循環(huán)動畫
模擬雙向循環(huán)動畫就是不使用 animation-direction: alternate; 屬性實現(xiàn)雙向循環(huán)的效果。
有點繞，上線段圖

通過線段圖分析

4x + 4y = 100

動作個數(shù) = 5       停留幀個數(shù) = 4         過渡幀個數(shù) = 4
設(shè)動作個數(shù)為n，則
動作個數(shù) = n       停留幀個數(shù) = n-1     過渡幀個數(shù) = n-1
然后，我們可以得出一個公式

(n-1)(x+y) = 100

但動作個數(shù)5包含了重復(fù)動作，不符合我們的計算習(xí)慣，不包含重復(fù)動作個數(shù)3才符合我們的計算習(xí)慣。那么設(shè)
（不含重復(fù)）動作個數(shù)為 m
（含重復(fù)）動作個數(shù)為 n，則 n = 2m-1，將 2m-1 帶入上面的公式得出公式

(2m-1-1)(x+y) = 100

將m統(tǒng)一換成n表示，再簡化公式后得到最終公式

(2n-2)(x+y) = 100

接下來我們再次嘗試讓每個動作停留20幀，通過公式求得動作過渡幀數(shù)y等于5，于是得出我們的幀數(shù)代碼

1. .demo{animation:anim-name 1s infinite;} /* 模擬雙向循環(huán) */

3. @-webkit-keyframes anim-name{

4.     0%{  /* 動作1 */  }

5.     20%{  /* 動作1 */  }

6.     25%{  /* 動作2 */  }

7.     45%{  /* 動作2 */  }

8.     50%{  /* 動作3 */  }

9.     70%{  /* 動作3 */  }

10.     75%{  /* 動作2 */  }

11.     95%{  /* 動作2 */  }

12.     100%{  /* 動作1 */  }

13. }

復(fù)制代碼

縮寫版代碼

1. .demo{animation:anim-name 1s infinite;} /* 模擬雙向循環(huán) */

3. @keyframes anim-name{

4.     0%, 20%, 100%{  /* 動作1 */  }

5.     25%, 45%, 75%, 95%{  /* 動作2 */  }

6.     50%, 70%{  /* 動作3 */  }

7. }

復(fù)制代碼

模擬雙向循環(huán)的方法可以讓所有動作的停留時間都保持一致，缺點就是代碼比較多，幀數(shù)也算得麻煩，不過也不失為一種解決方法。一般情況下，還是建議大家使用雙向循環(huán)+延遲播放的方案。
提到延遲播放，跟時間有關(guān)系，這個延遲時長該怎么定？如果以上方案，每個動作我們要固定它的過渡時間，比如動作之間過渡0.4秒，那過渡幀數(shù)又該怎么定？接下來我們再挖掘一下，幀數(shù)如何跟時間結(jié)合。
時間模式計算幀數(shù)
我們在做動畫的時候需要設(shè)置一個 animation-duration 動畫持續(xù)時間的屬性，知道持續(xù)播放時間我們就可以很輕易的計算出播放速度，還記得我們小學(xué)學(xué)的速度公式嗎？
設(shè)，總幀數(shù)為s(100幀)，播放時間為t，播放速度為v，得出公式

v = s / t

繼續(xù)用示例來加深理解。
示例要求：實現(xiàn)一個3個動作的單向循環(huán)動畫，播放時間2秒，每個動作的過渡時間為0.4秒
通過播放速度公式，我們可以計算出過渡幀數(shù)。
播放速度：  100幀 / 2秒 = 50幀/秒
過渡幀數(shù)：  50幀/秒 * 0.4秒 = 20幀
得出過渡幀數(shù)，接下來套用單向循環(huán)動畫的幀數(shù)公式，計算出停留幀數(shù)，參考上面總結(jié)的公式  nx + (n-1)y = 100  ，推導(dǎo)公式得出停留幀數(shù) x = (100-(n-1)y) / n
動作個數(shù)(n)：  3
過渡幀數(shù)(y)： 20
停留幀數(shù)：  (100-(3-1)*20)/3 = 20幀
于是得出我們的幀數(shù)代碼

1. .demo{animation:anim-name 2s infinite;}  /* 單向循環(huán) */

3. @keyframes anim-name{

4.     0%, 20%{  /* 動作1 */  }

5.     40%, 60%{  /* 動作2 */  }

6.     80%, 100%{  /* 動作3 */  }

7. }

復(fù)制代碼

這么多公式，眼都花了更別說記了。別著急，公式是給機器記的，這種破事就交給我們的機器去算。下面是一個簡易的CSS3動畫幀數(shù)計算器，可以幫我們省去一些計算的煩惱。
CSS3動畫幀數(shù)計算器：http://tid.tenpay.com/labs/css3_keyframes_calculator.html

以白樹同學(xué)的跑步動畫為示例

動畫是單向循環(huán)，有7個關(guān)鍵動作，動作需要使用逐幀過渡效果 animation-timing-function:step-start 實現(xiàn)，所以動作個數(shù)需要額外加1，即有8個動作。使用 step-start 后會自動平分動作停留時間，所以keyframes我們就不用加動作停留幀數(shù)了。
打開工具頁面，選擇 [單向循環(huán)動畫] -> [不停頓] -> [動作個數(shù)8] -> [生成代碼]

最后……就沒有最后了，歡迎大家一起交流探討。

轉(zhuǎn)載本文章請關(guān)注！網(wǎng)站建設(shè)選擇北京瑩晨設(shè)計prodigallitmag.com