Question

所以我发现了这个

代码很简单，我能够整合到我的页面中。但是，当我在同一页面上制作第二个动画精灵时，它不起作用，因为它似乎是代码

-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位置，以及如何放置多个的任何想法？

Answer 1

您的意思是为每个对象单独控制动画吗？ 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>

Answer 2

使用时

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

您创建了一组名为 play 的关键帧。 @keyframes之后的文本是标识符;在这种情况下，'play'就是这个配置的名称。然后对于一个元素，你告诉它要使用什么动画，在你的情况下，你告诉它使用播放一组帧。

在您的小提琴中，您的.hi元素具有以下动画：

animation: play .8s steps(10) infinite;

这里'play'只是为关键帧声明的标识符，而不是运行动画的命令。

如果你想拥有超过1种不同的动画，那么可以选择使用2种不同的动画，并给它们不同的标识符（即'play'和'animation2'或其他）。

例如，您的示例中为using the same sprite：

<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi"></div>
<div class="bye"></div>

CSS（注意我没有使用所有可能的浏览器前缀，动画称为 longwave 和 shortwave ）：

.hi {
    width: 50px;
    height: 72px; border: 1px dashed red;
    background-image: url("http://files.simurai.com/misc/sprite.png");

-webkit-animation: longwave .8s steps(10) infinite;
        animation: longwave .8s steps(10) infinite;
}

.bye {width: 50px; height: 72px; border: 1px dashed magenta;
    background-image: url("http://files.simurai.com/misc/sprite.png");
 -webkit-animation: shortwave .8s steps(5) infinite;
}

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

@-webkit-keyframes shortwave {
   from { background-position: -150px; }
     to { background-position: -400px; }
}
@keyframes shortwave {
   from { background-position: -150px; }
     to { background-position: -400px; }
}

W3C spec. documents for animations（CSS动画模块3级，第2节）

More details in Mozilla's Developer Network animation totorial

方法：在页面上有多个CSS精灵

2 个答案: