0

所以我发现了这个

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

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

-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 有什么想法吗？

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 回答
0

当你使用

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

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

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

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

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

如果您想拥有超过 1 个不同的动画，则可以使用 2 个不同的动画，并为它们提供不同的标识符（即“play”和“animation2”或其他）。

例如，在您的示例中使用相同的精灵：

<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 规范 动画文档（CSS 动画模块第 3 级，第 2 节）

Mozilla 开发者网络动画教程中的更多详细信息

于 2013-03-15T22:54:16.407 回答