最近在研究实现一个渐变效果时认识了一个比较新的CSS3 动画属性"steps", steps有点像Flash动画里的"帧"的概念，通过设置steps可以更精准的控制动画的播放帧率,它可以把一段动画分割成几步而不像transition动画直接从一个状态过渡到另一个状态。通常有一些断断续续的效果用steps可谓恰到好处。
下面通过实例操作来介绍下steps的用法：
一、文字输入效果
css：
@-webkit-keyframes shuru {
from { width: 100% } to { width:0 }}
@-webkit-keyframes guangbiao {
from, to { border-color: transparent }
50% { border-color: black }
}
p { position: relative;float: left;font-size:150%; }
p span {position:absolute;top:0;right:0;width:0;background: white;border-left: .1em solid black; box-sizing: border-box;
-webkit-animation: shuru 17s steps(30, end),
guangbiao 1s step-end infinite;
}
HTML：
<p>Tencent Wuhan User Experience Team<span> </span></p>
Note:
这个效果的关键在于光标的闪动和文字的输入时的运动，要实现这个效果必须二段动画同时出现，文字的逐个显示就运用到了steps. span在这里做光标的不停闪动。
二、做连续的图像CSS Sprite逐帧动画
如果要做上图这样的一个连续动画，通常会做成Gif图片，但是现在用CSS3新属性Steps, 无需Gif，只需把每一帧都放在单独的一个png文件里，通过动画调节背景图片位置信息，然后step by step 实现你的动画吧.
CSS
@-webkit-keyframes sayhi {
from { background-position: 0px; } to { background-position: -500px; }
}
.hi { width: 50px; height: 72px; background-image: url("xxx.png"); margin: 0 auto; -webkit-animation: sayhi .8s steps(10, end) infinite;}
Note:
sayhi 这个容器的大小要设置的正好是一个动画人物的大小。通过steps(), 可以做到简单并且无需任何ease(缓冲)效果的动画。
点此下载源码：
