CSS微动画 - 动起来番外篇！谈谈Animation的Step

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後可以为後续的篇幅多点新灵感，最後发现原来好奇心只是杀死了一堆脑细胞啊！！

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创～
如果对你有点帮助，拿去用吧！