CSS3 Animation 幀動畫 steps()

@keyframes fn{

　　0%{}

　　100%{}

}　　

CSS3的Animation有八個屬性

1. animation-name ：動畫名　　fn
2. animation-duration：時間　　1s
3. animation-delay：延時　1s
4. animation-iteration-count：次數  infinite
5. animation-direction：方向 　　alternate(反向)
6. animation-play-state：控制    running paused
7. animation-fill-mode：狀態　　forwards(當動畫完成後，保持最後一個屬性值)
8. animation-timing-function：關鍵幀變化 

animation-timing-function是控制時間的屬性

在取值中除了經常使用到的 三次貝塞爾曲線 之外，還有 steps() 函數

animation默認以ease方式過渡，它會在每一個關鍵幀之間插入補間動畫，因此動畫效果是連貫性的

除了ease，linear、cubic-bezier之類的過渡函數都會爲其插入補間。但有些效果不須要補間，只須要關鍵幀之間的跳躍，這時應該使用steps過渡方式

 

steps 函數指定了一個階躍函數

第一個參數指定了時間函數中的間隔數量（必須是正整數）

第二個參數可選，接受 start 和 end 兩個值，指定在每一個間隔的起點或是終點發生階躍變化，默認爲 end。

step-start等同於steps(1,start)，動畫分紅1步，動畫執行時爲開始左側端點的部分爲開始；

step-end等同於steps(1,end)：動畫分紅一步，動畫執行時以結尾端點爲開始，默認值爲end。

 

 step-start，step-end 的區別

@-webkit-keyframes circle {
        0% {background: red} 50%{background: yellow} 100% {background: blue} }

step-start ： 黃色與藍色相互切換

step-end  ： 紅色與黃色相互切換

2個參數都會選擇性的跳過先後部分，start跳過0%，end跳過100%

step-start在變化過程當中，都是如下一幀的顯示效果來填充間隔動畫，因此0% 到 50%  直接就顯示了黃色yellow

step-end與上面相反，都是以上一幀的顯示效果來填充間隔動畫，因此0% 到 50% 直接就顯示了紅色red

 

總結：

steps函數，它能夠傳入兩個參數，第一個是一個大於0的整數，他是將間隔動畫等分紅指定數目的小間隔動畫，而後根據第二個參數來決定顯示效果。

第二個參數設置後其實和step-start，step-end同義，在分紅的小間隔動畫中判斷顯示效果。能夠看出：steps(1, start) 等於step-start，steps(1,end)等於step-end

最核心的一點就是：timing-function 做用於每兩個關鍵幀之間，而不是整個動畫