如何重复精灵动画中的最后两帧
问题描述：
我想弄清楚一旦整个动画完成后循环最后2帧的最佳方式是什么。如何重复精灵动画中的最后两帧
例如我有8个步骤的精灵动画。它应该从1到6一次，然后我想从7-8步骤到永远循环。
现在我很确定它不能这样做，所以我想也许只是动画从1到6，然后让jQuery替换类（有另一个精灵）在准确的时间，当第一个精灵是完整的，你怎么看？
答
你可以通过链接多个CSS关键帧动画来做到这一点。下面是一个例子，其中10步动画播放一次超过.8s，然后包含最后2帧图像的第二个关键帧动画（loop）无限重复（初始起始延迟为.8s）。
.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
animation: play .8s steps(10) 1,
loop .2s steps(2) .8s infinite;
}
@keyframes play {
from {
background-position: 0px;
}
to {
background-position: -500px;
}
}
@keyframes loop {
from {
background-position: -400px;
}
to {
background-position: -500px;
}
}<div class="hi"></div>+1
哈哈，谢谢你的回复和例子，我很惊讶这样做可以这样做！ – DearBee
你绝对可以把它重复最后两帧。请参阅本指南以获取关于spritesheets的良好教程：http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps您需要为两帧部分制作单独的动画。您应该在双帧动画上设置动画延迟，以延迟它，直到上一个动画完成，并为关键帧和背景位置设置不同的位置。 –
感谢您的回复，我没有线索可以这样做，这让事情变得更容易。 – DearBee