Q: 今天是教師節呢，怎麼沒有放假？
A: 認真上課黑！本篇是可能實用，但更可能殺光腦細胞的steps阿！

上一篇在做倒數計時的圓餅圖時，針對animation-timing-function有使用到比較特別的值steps(1, start)，本篇番外就要來講講steps的用法，算是補上之前沒有特別講到的部分！！另外其實這個用法，小編也是在找本次鐵人賽的靈感時看到的，之前從來沒有用過～～～下面除了講解以外，還會帶上一些圖比較好理解。 小編也需要圖加文才比較好懂阿！！

來看個程式碼 + 影片示意

示例一 steps的start

屬性animation-timing-function定義動畫播放的速度曲線，在沒有使用steps之前，不論速度快慢，動畫皆是由0%以設定的值的時間速度曲線漸變至100%，而steps的速度曲線卻不是如此。

• .first使用steps(5, start)。
• .second使用linear。

<style>
  .container {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 300px;
  }
  .item {
    height: 100px;
    width: 0;
    margin-bottom: 10px;
    background-color: SteelBlue;
    animation-duration: 10s;
    animation-name: roundFirst;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }
  .first {
    animation-timing-function: steps(5, start);
  }
  .second {
    animation-timing-function: linear;
  }
  @keyframes roundFirst {
    0% {
      width: 0;
    }
    100% {
      width: 250px;
    }
  }
</style>
<div class="container">
  <div class="item first"></div>
  <div class="item second"></div>
</div>

上方影片中可以看到.first的寬度是一個一個加寬的！steps的第一個參數設定本次動畫會分為幾段演繹，而第二個參數設定什麼時候演繹。以範例來說，就是把100%分為5段，並且因為start的設定，會直接從第一段開始演繹。

示例二 steps的end

如果將上方程式碼的start改為end，那麼樣式看起來就會完全不一樣！

<style>
  .first {
    animation-timing-function: steps(5, end);
  }
</style>

所以兩個示例可以怎麼理解？

以上方的動畫來說，可以想像把動畫都除以5，所以：

1. 每一段是20%。
2. 每一段是2s。
3. 每一段是50px。

如果設定 start

那麼動畫就會在前2s的時候先演繹@keyframes的前20%，所以寬度在前2s就會有50px。

如果設定 end

那麼動畫就會在演繹2s後才演繹@keyframes的前20%，所以寬度在2s之後才就會有50px。

那上方的.first還是動畫嗎？

Ａ：是的！
steps雖然不像其他值一樣讓動畫從0%順順的演繹到100%，但它還是動畫，實現了讓animation可以分段演繹的效果。

看了很久吶(⋟﹏⋞)

在看到steps之前，小編如果想要做到.first的效果都是用別的方法寫的。 看完steps還是霧煞煞的可以考慮敲碗ＸＤ 原本想著看完steps後可以為後續的篇幅多點新靈感，最後發現原來好奇心只是殺死了一堆腦細胞啊！！

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果有更好的寫法，歡迎指教！ 希望各位不吝賜教～
如果想看更多效果，歡迎敲碗！ 提供示意圖小編寫寫看～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後原創～
如果對你有點幫助，拿去用吧！