css - 控制css3动画的平滑度

Question

我正在尝试为一系列关键帧制作动画，以产生运动的错觉。我想更改我的 html 元素上的背景位置，以在一秒钟内以一秒钟左右的间隔显示不同的帧，直到它再次播放。

这是我的 - http://jsfiddle.net/kSNWV/ (出于测试目的，我现在刚刚完成了 -webkit 风格)。这是我要制作动画的图像(火车驶入隧道)- http://i.imgur.com/6uOoK.png

我的 html:

<div id="train"></div>​

我的CSS:

#train { width: 110px; height: 43px; border: 10px solid #454545;
background: url(http://i.imgur.com/6uOoK.png) 110px 0;
-webkit-animation: train 2s linear 0s infinite normal; }

@-webkit-keyframes train {
    0%{background-position: 110px 0;}
    2%{background-position: 0px 0;}
    4%{background-position: -110px 0;}
    6%{background-position: -220px 0;}
    8%{background-position: -330px 0;}
    10%{background-position: -440px 0;}
    12%{background-position: -550px 0;}
    14%{background-position: -660px 0;}
    16%{background-position: -770px 0;}
    18%{background-position: -880px 0;}
    20%{background-position: -990px 0;}
    22%{background-position: -1100px 0;}
    24%{background-position: -1210px 0;}
    26%{background-position: -1320px 0;}
    28%{background-position: -1430px 0;}
    30%{background-position: -1540px 0;}
    32%{background-position: -1650px 0;}
    34%{background-position: -1760px 0;}
    36%{background-position: -1870px 0;}
    38%{background-position: -1980px 0;}
    40%{background-position: -2090px 0;}
    42%{background-position: -2200px 0;}
    44%{background-position: -2310px 0;}
    46%{background-position: -2420px 0;}
    48%{background-position: -2530px 0;}
}

是否可以有一个 css3 动画，它只是“捕捉”到每个步骤而不对中间的过渡进行动画处理？另外，如何在不反向播放的情况下重置此动画(现在它正在将 -2530px 的 background-position 动画化回 110px最后)。

Answer 1

使用step-end 计时函数。请注意，这会忽略最后一个关键帧。 http://jsfiddle.net/kSNWV/3/