4

我正在尝试执行 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 属性添加到框架中，它会为这些属性设置动画，但是尝试更改背景 url，如上面的代码所示，不起作用。有什么建议么？

4

2 回答 2

1

您发布的内容在 Chrome 和 Safari (http://jsfiddle.net/4rAer/) 中运行良好，但在 Firefox 中不起作用。它在 Firefox 中消失的地方是包含背景图像。您可以在 Firefox 中为背景设置动画 - 但只能设置背景颜色。但是，如果这仅适用于 iBooks，则无关紧要。我假设动画在 iBooks 中也不起作用。

这个小提琴有一个幻灯片，应该有更好的支持。它确实需要一些额外的 HTML，但我对 Top 属性进行动画处理得到了广泛的支持。http://jsfiddle.net/4rAer/1/

于 2012-08-10T13:02:18.017 回答
0

见这里： http ://chrismar.sh/2011/07/19/animating-sprites-using-css/

不要动画background-image属性，做background-position一个！

于 2012-09-23T17:01:26.690 回答