首先，我們用CSS3的animation完成一個進度條動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
.div-1{width: 200px; height: 20px; background-color: gray; position: relative;}
.div-1::after{content: ''; background-color: red; height: 20px; position: absolute; top: 0; left: 0; animation: progress 10s ease 0s both;}
@keyframes progress{
0% {padding-right: 0%;}
20% {padding-right: 50%;}
40% {padding-right: 70%;}
60% {padding-right: 85%;}
80% {padding-right: 95%;}
100% {padding-right: 100%;}
}
</style>
</head>
<body>
<div class="div-1"></div>
</body>
</html>
這裏，是使用::after僞類動態創建進度條紅色區域，並通過animation改變padding-right值來實現其效果，在animation中，ease表示動畫從低速開始，然後加快，最後變慢的速度曲線，除了ease，還有諸如linear、ease-in、ease-out、ease-in-out和貝塞爾曲線等等，它們所表示的是在整個完整動畫中的每兩個相鄰的關鍵幀之間的速度變化狀態，在上面的例子中，則是0%-20%之間，20%-40%之間等等，並不要理解成整個動畫的狀態，當然，如果你定義的是0%-100%（或者from-to）則可以理解成表示整個動畫過程，整個速度曲線是平滑過渡的，視覺上十分流暢
在animation-timing-function中，有個比較特殊的屬性，steps，它表示一個階躍函數，可以爲step-start、step-end、steps(1, end)三種方式
其中，step-start等同於steps(1, start)，step-end等同於steps(1, end)，steps([num], [type])第一個參數表示階躍的次數（動畫分幾步完成），第二個參數有start和end兩個值，start表示動畫從一開始就跳到100%直到週期結束，end表示保持0%狀態直到週期結束
注意，這裏的階躍次數指的是每兩個關鍵幀之間的次數，比如0%-20%之間，20%-40%之間等等，不是整個動畫狀態
上述例子中，把ease改爲steps(2, end)可以發現，動畫在0%-20%的動畫週期中，分割成了兩次跳躍，比如這裏的20%結束狀態是padding-right:50%，則第一次跳躍爲padding-right:25%，這裏的跳躍是沒有任何過渡效果的，直接顯示改變後的狀態，因此，也叫作階躍函數
主要可以運用在一些sprits動畫中，通過階躍函數改變其background-position值，實現連貫的動畫效果