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 に答える