Question

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

例如，我有8个步骤制作的精灵动画。它应该从1到6进行一次，然后我想要从7-8步骤永远循环。

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

Answer 1

您可以通过将多个CSS关键帧动画链接在一起来完成此操作。下面是一个示例，其中10步动画播放一次超过.8s，然后第二个关键帧动画（loop）由图像的最后2帧组成无限重复（初始启动延迟为.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 个答案: