初探animation中steps()属性（animation steps属性）

今天，我们了解一下animation中的steps（）方法，实现简单一个跑马图效果（利用简单的原理，让马儿飞快的奔跑起来）

一.steps介绍

steps()是一个timing function（animation中），steps 函数定义了一个阶梯跳跃函数。允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。

两个参数：第一个参数是一个正值，指定动画分割的段数。第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。start 第一帧是动画结束的时候状态； end 第一帧是动画开始的时候状态。

steps(3,start)：动画分成3步，动画执行时为起始左侧端点的部分为开始。

steps(5,end)：动画分成5步，动画执行时以结尾端点为开始，默认值为end。

steps第一个参数的理解：

steps(3，start)

timing-function 作用于每两个关键帧之间，而不是整个动画

那么第一个参数很好理解了，steps的设置都是针对两个关键帧之间的，而非是整个@keyframes，所以第一个参数对应了每次steps的变化，

换句话说也是 0-25 之间变化3次， 25-50之间 变化3次 ，50-75 之间变化3次，以此类推。

第二个参数可选，接受="" start="" 和="" end="" 两个值，指定在每个间隔的起点或是终点发生阶跃变化。

二、简单的小demo（跑马图）

结合background-position

图片有多长(x)，只要控制单个的大小，不要计算距离位置，直接最后background-position: 0 -y;然后直接百分之百到这个位置。分几步就让n等于多少。参考上边的end时的用法或者默认状态下的用法。（之前傻乎乎的利用移动原始图的位置，达到让马儿跑起来的效果，现在想起来真的很搞笑）