如何在精灵动画中重复最后两帧

Question

我正在尝试找出在整个动画完成后循环最后 2 帧的最佳方式。

例如，我有一个由 8 个步骤组成的精灵动画。它应该从 1 到 6 进行一次，然后我希望从 7-8 的步骤永远循环。

现在我很确定不能那样做，所以我想也许只是制作从 1 到 6 的动画，然后用 jQuery 替换 class（有另一个精灵）在第一个精灵完成的确切时间，你觉得怎么样？

Answer 1

您可以通过将多个 CSS 关键帧动画链接在一起来实现。下面是一个 10 步动画在 0.8 秒内播放一次的示例，然后由图像的最后 2 帧组成的第二个关键帧动画 (loop) 无限重复（初始启动延迟为 0.8 秒） .

.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>

如何在精灵动画中重复最后两帧

How to repeat last two frames in sprite animation

jquery

animation

sprite