css - 如何: have more than one CSS sprite on a page

Question

所以我找到了这个

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

代码很简单，我可以将其集成到我的页面中。但是，当我在同一页面上制作第二个动画 Sprite 时，它不起作用，因为代码似乎是

-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 位置，关于如何放置多个 ID 有什么想法吗？

Answer 1

当你使用

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

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

在您的 fiddle 中，您的 .hi 元素具有以下动画:

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

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

如果你想要超过 1 个不同的动画，方法是使用 2 个不同的动画，并给它们不同的标识符(即“播放”和“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