在animation中最重要的其實就是時間函數（animation-timing-function）這個屬性，他決定了你的動畫將以什麽樣的速度執行，所以最關鍵的屬性值也就是cubic-bezier(n,n,n,n),你平時用到的linear、ease、ease-out等都是基於這個屬性值的，那麽我們接下來就看看這個東西到底是什麽含義。

這個時間函數是通過一個坐標反映出來的：

這個就是timing-function的工作圖，總共有4個點來描述整個曲線的運動形狀，其中P0和P3是開始和截止的位置，關鍵位置是P1和P2，那麽P1的坐標(x,y)就對應了

cubic-bezier(n,n,n,n)

接下來就是關鍵步驟了，將P0、P1連線、P2、P3連線，此時這兩條線就是整條曲線首位的切線，然後發揮自己的想象力想一下，這兩個切線固定，那麽整條曲線基本就可以畫出來了（因為你要平滑連接、不要亂拐彎），不信你可以自己確定兩個點試試，永遠可以畫出一條平滑的曲線。

畫完了，這就是一條運動曲線，那麽怎麽確定動畫的速度呢，其實這條曲線的平陡程度就是動畫快慢的反應，即越陡的部分動畫反應出來就是越快，越平的部分當然動畫反應的就是越慢了。

1.普通動畫介紹

那麽基於這兩個重要的坐標，css指定了幾條常用的曲線：

後面的就是他們的坐標，你可以將cubic-bezier(n,n,n,n)設置成對應值進行動畫比較，是一樣的，這是你就發現其實第一個linear可以換成坐標（0.5,0.5,0.5,0.5），總之很多值都可以替換。

豁然開朗了吧！？

這個懂了以後就講正緊的animation屬性吧：

屬性值 描述

這是w3c官方給出的屬性，即animation共有6個屬性值，具體的請移步w3c官網查詢具體信息。

2.steps()動畫介紹

那麽，規定了自定義的運動特效，其實有種切線是畫不出來的，就是P0和P3的位置改變了，不將是起始位置了，而且我不僅僅位置變了，P的個數都變了，為了滿足這個需求，並且為了滿足逐幀動畫的實現，就有了steps這個函數；

他的原理是這樣的

按圖理解：

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

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

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

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

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

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

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

看看W3C的規範 transition-timing-function

steps第一個參數的錯誤的理解：

steps(5，start)

steps() 第一個參數 number 為指定的間隔數，即把動畫分為 n 步階段性展示，估計大多數人理解就是keyframes寫的變化次數

例如:

@-webkit-keyframes circle {
　　0% {動畫樣式}
　　25%{動畫樣式}
　　50%{動畫樣式}
　　75%{動畫樣式}
　　100%{動畫樣式}
}
我之前也一直認為steps(5，start）中的5 就是指的keyframes中的0% 25% 50% 75% 100% 分成5個間隔等分

為什麽會出現這種理解錯誤，我們看一個例子

keyframes的關鍵幀是只有2個規則的時候，假如我們有一張400px長度的雪碧圖

@-webkit-keyframes circle { 
0% {background-position-x: 0;} 
100%{background-position-x: -400px;} 
} 

此刻設置steps(5，start）那麽會發現5張圖會出現幀動畫的效果，因為steps中的5把 0% – 100%的規則，內部分成5個等分

實際內部會執行這樣一個關鍵幀效果

@-webkit-keyframes circle { 
0% {background-position-x: 0;} 
25% {background-position-x: -100px;} 
50% {background-position-x:-200px;} 
75%{background-position-x: -300px;} 
100%{background-position-x: -400px;} 
} 

將這個規則稍微修改下，加入一個50%的狀態

@-webkit-keyframes circle { 
0% {background-position-x: 0;} 
50% {background-position-x: -200px;} 
100%{background-position-x: -400px;} 
} 

那麽同樣用steps(5，start）效果就會亂套

此刻你會很迷惑，所以關鍵要理解第一個參數的針對點，首先引入一個核心點：

timing-function 作用於每兩個關鍵幀之間，而不是整個動畫

那麽第一個參數很好理解了，steps的設置都是針對兩個關鍵幀之間的，而非是整個keyframes，所以第一個參數對 - 次數對應了每次steps的變化

換句話說也是 0-25 之間變化5次， 25-50之間 變化5次 ，50-75 之間變化5次，以此類推

第二個參數可選，接受 start 和 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

引用w3c的一張step的工作機制圖

總結：

steps函數，它可以傳入兩個參數，

　　第一個是一個大於0的整數，他是將間隔動畫等分成指定數目的小間隔動畫，然後根據第二個參數來決定顯示效果。

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

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

原文參考鏈接：https://blog.csdn.net/qq_35568483/article/details/52490660

css3中animation屬性animation-timing-function知識點以及其屬性值steps()