CSS3动画，每帧中有不同的图像

Question

我正在尝试执行一个CSS动画，其中循环播放许多图像。我很感激通常情况下会使用sprite（这样做可以与此代码一起使用），但由于我希望在iBooks中使用此动画，我必须在每个图像上保持200万像素的限制，因此我使用单独的图像。因此，我尝试使用以下CSS，但没有成功：

#sprite {
    width: 200px;
    height: 170px;
    background:url('../Images/monkey1small.png') 0 0;
    -webkit-animation-duration:4000ms;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:animate01;
    -webkit-animation-direction:forward;
    -moz-animation-duration:1ms;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:step-start;
    -moz-animation-name:animate01;
}
@-webkit-keyframes animate01 {
0%           { background:url('../Images/monkey1small.png') 0 0; }
20%          { background:url('../Images/monkey2small.png') 0 0; }
40%          { background:url('../Images/monkey3small.png') 0 0; }
60%          { background:url('../Images/monkey4small.png') 0 0; }
80%          { background:url('../Images/monkey5small.png') 0 0; }
100%         { background:url('../Images/monkey1small.png') 0 0; }
}
@-moz-keyframes animate01 {
0%           { background:url('../Images/monkey1small.png') 0 0; }
20%          { background:url('../Images/monkey2small.png') 0 0; }
40%          { background:url('../Images/monkey3small.png') 0 0; }
60%          { background:url('../Images/monkey4small.png') 0 0; }
80%          { background:url('../Images/monkey5small.png') 0 0; }
100%         { background:url('../Images/monkey1small.png') 0 0; }
}

它是用一个简单的div调用的：

目前，它只是静态地显示第一个图像。我可以将其他css属性添加到框架中，它将为这些属性设置动画，但是，如上面的代码所示，尝试更改背景url是不起作用的。有什么建议吗？

Answer 1

您发布的内容在Chrome和Safari中运行良好(http://jsfiddle.net/4rAer/)但在Firefox中没有任何作用。它在Firefox中消亡的地方是包含了一个背景图像。您可以在Firefox中设置背景动画，但只能设置背景颜色。但如果这只是针对iBooks，那就不重要了。我假设动画在iBooks中也不起作用。

这把小提琴有一个胶片，应该有更好的支撑。它确实需要一些额外的HTML，但我为Top属性设置动画得到了广泛的支持。http://jsfiddle.net/4rAer/1/

Answer 2

请参阅此处：http://chrismar.sh/2011/07/19/animating-sprites-using-css/

不要为background-image属性设置动画，而是为background-position属性设置动画！