0

だから私はこれを見つけました

http://jsfiddle.net/simurai/CGmCe/

コードは簡単で、自分のページに統合できました。ただし、同じページに 2 つ目のアニメーション スプライトを作成しようとすると、コードが

-webkit-keyframes play {    from { background-position:    0px; }
     to { background-position: -500px; } }

@-moz-keyframes play {    from { background-position:    0px; }
     to { background-position: -500px; } }

@-ms-keyframes play {    from { background-position:    0px; }
     to { background-position: -500px; } }

@-o-keyframes play {    from { background-position:    0px; }
     to { background-position: -500px; } }

@keyframes play {    from { background-position:    0px; }
     to { background-position: -500px; } }

すべての css アニメーションにグローバルに適用され、特に「hi」というラベルの付いた div には適用されません

ID ごとに変更する必要があるのは TO の位置ですが、複数配置する方法について何か考えはありますか?

4

2 に答える 2

0

オブジェクトごとに個別にアニメーションを制御するということですか? http://jsfiddle.net/CGmCe/1738/

その場合は、他の DIV 用に別の ID を作成するだけです

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://files.simurai.com/misc/sprite.png");
}
#hi1 {
    -webkit-animation: play .8s steps(10) infinite;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(10) infinite;
}

#hi2 {
    -webkit-animation: play .4s steps(10) infinite;
       -moz-animation: play .4s steps(10) infinite;
        -ms-animation: play .4s steps(10) infinite;
         -o-animation: play .4s steps(10) infinite;
            animation: play .4s steps(10) infinite;
}

そしてHTML：

<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi" id="hi1"></div>
<div class="hi" id="hi2"></div>
于 2013-03-15T22:31:31.137 に答える