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 作用於每兩個關鍵幀之間，而不是整個動畫