CSS3 timing-function: steps()介绍

在应用 CSS3 渐变/动画时。有个控制时间的属性 <timing-function>。它的取值中除了经常使用到的三次贝塞尔曲线以外，还有个steps() 函数。

steps 函数指定了一个阶跃函数，第一个參数指定了时间函数中的间隔数量（必须是正整数）；第二个參数可选。接受 start 和 end 两个值。指定在每一个间隔的起点或是终点发生阶跃变化，默觉得 end。

#demo {
  animation-iteration-count: 2;//动画反复两次
  animation-duration: 3s;//每次动画持续时间为3s
}

我们分别对它应用 steps(3, start) 和 steps(3, end)。做出阶跃函数曲线例如以下：

1.取steps(3, start)

第一个參数将动画划分为了三个部分。

第二个參数“start”，指定在每一个部分的開始发生阶跃变化，即图中实心圆处。动画的过程就是：1/3时的状态→2/3时状态→最后的状态。

这里写了个最简单的demo，将一个盒子分5步从红色变为白色。

在这个demo中你能够看到最后的状态为白色：http://runjs.cn/detail/mqbdpite

2.取 steps(3, end)

与steps(3, start)不同的是，动画的过程是：初始状态→1/3时状态→2/3状态。也就是说定义的终于状态并不会显示出来。而是显示结束前1/3时间段的状态。我们相同通过demo来观察：http://runjs.cn/detail/77frfllv。相同是由红色变为白色，可是最后的状态并非白色。

附件中的demo是结合“雪碧图”(见链接http://km.oa.com/group/23033/articles/show/226032)和steps()实现一个小男孩奔跑的动画。

@keyframes animate {
  to {
    background-position: -3420px;
  }
}
.kai.animate {
  animation: animate 0.75s steps(19) infinite;
}

动画完整的效果是将这幅图在0.75s内，分19次（雪碧图上刚好有小男孩19个动作），水平方向向左移动3420px（图像的宽度）。

快去下附件。让你的男孩跑起来。