Question

我正在尝试执行一个CSS动画，其中循环了许多图像。我很欣赏通常会使用精灵（这样做可以使用这个代码），但是因为我希望在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属性，它将为这些属性设置动画，但是尝试更改上面代码中显示的背景网址不起作用。有什么建议吗？

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一个！

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

2 个答案: