CSS3中animation的帧动画steps()
animation的时间函数预设值有：linear ease ease-in ease-out ease-in-out cubic-bezier。
这些线性函数都会自动插入补间动画，以保证动画的连贯性。但是在很多复杂动画里，是无法自动补差的。为了能有良好的效果，我们可以在美术大大的协助下完成一个优美的逐帧动画。
比如这张图：
这个小人的每个动作被均匀的插入一张图片中，一共分了8个动作。为了让小人动起来，我们只需要在一段时间内逐个播放每个图就可以了。代码如下：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>animation stepstitle>
head>
<body>
<div class="animation-box">div>
body>
html>
.animation-box{
width: 184px;
height: 325px;
background: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3375685007,3704003788&fm=26&gp=0.jpg') no-repeat;
animation: play 1s steps(8) infinite;
}
@keyframes play{
100%{
background-position-x: -1472px;
}
}
这个动画中，我们将8个图片均匀的分布在0～100%之内，匀速播放。最后小人走了起来。
这里需要注意的是steps的帧数是和keyframes相关的，而不是与时间相关的。
.animation-box{
width: 184px;
height: 325px;
background: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3375685007,3704003788&fm=26&gp=0.jpg') no-repeat;
animation: play 1s steps(4) infinite;
}
@keyframes play{
50%{
background-position-x: -736px;
}
100%{
background-position-x: -1472px;
}
}
在这个例子里，我们的时间是不变的。增加一个50%的关键帧，这个关键帧刚好指向图片的正中间。如果保持8个图片帧的话，我们会发现，图片被分成了16份。而改成4个图片帧的话，图片就又恢复了原本的8份了。由此可见，steps分割的是关键帧，而非时间。
！最后看看steps的参数
steps([, [ start | end ] ]?)
integer，表示一个整数，keyframes关键帧内的帧数。
start/end，表示每一帧发生变化的位置，默认值为end。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>animation stepstitle>
head>
<body>
<div class="animation-box">div>
body>
html>
.animation-box{
width: 184px;
height: 325px;
background: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3375685007,3704003788&fm=26&gp=0.jpg') no-repeat;
animation: play 1s steps(8) infinite;
}
@keyframes play{
100%{
background-position-x: -1472px;
}
}
以上面为例，1472px的图片被分为8帧，平均point为[184, 368, 552, 736, 920, 1104, 1288, 1472]。如果该参数为start，那么最后一帧将以-1472px作为裁切的开始点，这样的展示区域为1472～1656，而第一帧将展示184～368，所以看起来会变成开始少了一帧，最后空白一帧；如果该参数为end，那么最后一帧将以-1472px作为裁切的结束点，这样的展示区域为1288～1472，第一帧将展示0～184，小人的动作得到完整展示。