css3 animate steps帧动画

css3 animate steps帧动画

背景图如下：宽度是270px,每个方块是等宽的45px。

<section id="step"></section>

#step {
    width: 45px; height: 45px; border: 1px solid #ccc;
    background: url(../images/1.png) no-repeat left center;
    animation: goStep infinite 3s steps(6, end);
}
@keyframes goStep{
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -270px 0;
    }
}

如果steps有第二个参数，
把一张width:270px的图片，0->270分成 6 + 1 = 7份， 进行帧动画播放。
第1张图片坐标：0 0
第2张图片坐标：45 0
第3张图片坐标：90 0
第4张图片坐标：135 0
第5张图片坐标：180 0
第6张图片坐标：225 0
第7张图片坐标：270 0（已经到了图片的尾部，这张图是空的）
steps(6, end) 表示动画播放的时候，抛弃最后一张图；
steps(6, start)表示播放的时候，抛弃第一张图。

如果steps没有第二个参数，steps(6) ，则表示把图分成6份，所有的帧都不抛弃。
第1张图片坐标：0 0
第2张图片坐标：45 0
第3张图片坐标：90 0
第4张图片坐标：135 0
第5张图片坐标：180 0
第6张图片坐标：225 0
这个steps(6)的意思，和上面背景图片表示的意思是完全一样的，就是把0->270切成6份。