1分钟深入了解CSS3的动画属性animation
拖好久的animation…溫馨提示，先看效果，代碼附在講解后
上篇說到@keyframe可以定義動畫，animation就是將@keyframe所定義好的動畫添加在元素身上。
animation可以傳8個參數，常用的有6個，動畫名稱（@keyframe定義好的），執行時長，動畫類型（默認ease），執行延時時常（默認0），動畫循環次數（默認1），運動方向（默認normal）
對定義動畫有問題移步@keyframe，執行和執行延時時長也木得問題，重點講動畫類型、動畫循環次數、運動方向
1.動畫類型
動畫類型的屬性值與transition相同，ease，linear，ease-in，ease-out，ease-in-out，cubic-bezier，step-start，step-end，steps(num,[ start | end ] )，除了step系列，其余在transition中和貝塞爾曲線中講過CSS3過渡屬性transition詳解、貝塞爾曲線，那么就來康康step系列吧
（1）steps(num, start / end)
知識點1：num表示該動畫的上一關鍵幀到下一關鍵幀分幾步完成，步數越多動畫越細膩，舉個例子吧，圖1為linear屬性值的動畫效果，圖2為屬性值為steps(1, end)的動畫效果。
圖1 linear 圖2 steps(1,end)知識點2：end與start的區別。end表示保留當前幀狀態，直到這一關鍵幀動畫結束，忽略最后一幀的效果（由圖1圖2對照可知最后一幀綠色沒有顯示），配合使用forwards，可以看到最后一幀，如圖3
圖3 forwardsstart保留下一段幀狀態，直到這段一關鍵幀動畫結束，忽略第一幀的狀態，如圖4，沒有顯示第一幀的黃色，一般不常使用start
圖4 steps(1, start)再舉一個分4步執行一個關鍵幀的例子，如圖5
圖5 steps(4,end)?
（2）step-end與step-start
step-end相當于steps(1, end)，step-start相當于steps(1, start)
2.動畫循環次數
可以填num / infinite，num表示確定循環多少次，infinite表示循環無數次
3.運動方向
可以填normal(默認)，reverse(反方向)，alternate(正方向->反方向->正方向)，alternate-reverse(反方向->正方向->反方向)，與infinite配合使用，舉例alternate，如圖6，其中小方塊在左下角停留沒有移動到左上角就是因為end忽略最后一幀的問題
圖6 alternate以上所有例子代碼如下
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}@keyframes run {0% {left: 0;top: 0;background-color: #ffb;}25% {left: 100px;top: 0;background-color: #fbf;}50% {left: 100px;top: 100px;background-color: #bff;}75% {left: 0px;top: 100px;background-color: #fbb;}100% {left: 0px;top: 0px;background-color: #bfb;}}.wrapper {width: 200px;height: 200px;border: 1px solid #000;position: absolute;left: 100px;top: 100px;}.demo {position: absolute;width: 100px;height: 100px;background-color: #bbf;}.run {/* animation: run 4s linear infinite; *//* animation: run 4s steps(1,end); *//* animation: run 4s steps(4,end); *//* end + forwards *//* animation: run 4s steps(1,end) forwards; *//* animation: run 4s step-end; *//* animation: run 4s steps(1,start) alternate; */animation: run 4s steps(1,end) infinite alternate;}button {position: absolute;width: 50px;height: 25px;line-height: 25px;top: -26px;left: -1px;}</style> </head><body><div class="wrapper"><div class="demo"></div><button>run</button></div></body> <script>var demo = document.getElementsByClassName('demo')[0];var runBtn = document.getElementsByTagName('button')[0];runBtn.onclick = function () {demo.classList += " run";} </script></html>我的承諾兌現啦，動畫結束后，CSS3的內容剩transform了
但是暫時不打算更CSS3了，一方面博主已經學到bootstrap啦~~~，另一方面其實博主自己也沒搞很明白呢，感覺講不清楚，個人覺得雖然效果很炫酷吧，但是不是很常用的樣子呀，所以拖一拖，以后再更吧
所以接下來直接更bootstrap了，加油啦！
總結
以上是生活随笔為你收集整理的1分钟深入了解CSS3的动画属性animation的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： @keyframes—定义动画关键帧
- 下一篇： Bootstrap的下载和使用