animation默认以ease方式过渡，会以在每个关键帧之间插入补间动画，所以动画效果是连贯性的。ease，linear等之类的过渡函数都会为其插入补间。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式。本文后面有案例。
steps用法
简单地说，就是原本一个状态向另一个状态的过渡是平滑的，steps可以实现分布过渡。steps用法 :
steps(n,[start | end])
n是一个自然数，steps函数把动画分成n等份。
-
step-start
等同于 `steps(1,start)` ，动画分成 1 步，动画执行时以左侧端点为开始 ；
-
step-end
立即学习“前端免费学习笔记（深入）”；
等同于 steps(1,end) ，动画分成 1 步，动画执行时以结尾端点为开始 。
没懂对不对？我也没懂，上面是官方的说法。接着往下看吧
辨析steps
可以在demo中查看step的区别：狠狠地戳下去
steps(4,start) 与 steps(1,start) 的最大区别就是每次动画"跳跃"的时候，即从 0% -> 25% 的时候，steps(1) 直接一步到位，瞬间从0%的状态跳到25%的状态，而steps(4)会逐渐走4步，即从 0% -> 25% 要跳 4 步 !
慢慢体会一下，应该就知道steps的作用了吧
案例 - 控制台效果
先戳 demo
这里就是steps(1,start) ，动画又是只有 0%(100%) 、 50% 两个状态，所以直接一步跳跃，直接走完。
你可以改成steps(4)，就更能知道steps的作用了
案例 - 人人网首页效果
先看看人人网首页的效果:
再戳demo
一步一步分析：
首先，我们不加动画，就像s1；
-
然后，加animation但是没有steps，像s2那样。这样很奇怪是不是，就是因为没有steps，动画是连贯的，所以我们看到了跑马灯似的效果：
-
最后，当然是我们的终极效果s3，因为设计师把我们看到的类似 Flash 的动画逐帧导出成一张大图，再加上合适的steps和动画时间，就看到了人人网首页的那般顺滑的动画效果！
注意，为了保持最后停止的状态，还要加一个 `forwards ` ，这里不是本文重点，就不细说了。
呼呼，终于理清了steps的作用。感觉这个过程就是渐进增强的体验，一开始用户只能体验s1，后来有了css3，可以体验美妙的动画了，就像s3。单元以后我们能够做到让每一个用户都满意。
原文
欢迎关注我的博客
