CSS 动画无限不工作

Question

我有以下代码：

.dangerous_b {
    width: 636px;
    height: 72px;
    background-image: url('/media/anim.png');
    float: left;
    background-color: black;
    animation: bganim 100ms steps(1, start) infinite;
}
@keyframes bganim {
    from { background-position: 0px 0px; }
    to { background-position: 0px -72px; }
}

但是动画只播放一次。我究竟做错了什么？

---

编辑：请注意，动画播放一次，因此存在视觉差异。但我希望动画循环播放。

顺便说一句：这是我使用的图片： http://i.imgur.com/fA80qQc.png

---

第二次编辑：这是代码片段

.dangerous_b {
    width: 636px;
    height: 72px;
    background-image: url('/media/anim.png');
    float: left;
    background-color: black;
    animation: bganim 100ms steps(1, start) infinite;
}
@keyframes bganim {
    from { background-position: 0px 0px; }
    to { background-position: 0px -72px; }
}

.dangerous_b {
    width: 636px;
    height: 72px;
    background-image: url('http://i.imgur.com/fA80qQc.png');
    float: left;
    background-color: black;
    animation: bganim 100ms steps(1, start) infinite;
}
@keyframes bganim {
    from { background-position: 0px 0px; }
    to { background-position: 0px -72px; }
}

---

第三次编辑：它现在使用以下代码：

.dangerous_b {
    width: 636px;
    height: 72px;
    background-image: url('http://i.imgur.com/fA80qQc.png');
    float: left;
    background-color: black;
    animation: bganim 100ms steps(1, start) infinite;
}
@keyframes bganim {
    50% { background-position: 0px -72px; }
}

Answer 1

原因：

问题是由于animation-timing-function. 值steps(1,start)意味着动画只有一步，并且它发生在动画本身的开始处。

根据MDN（从定义中挑选step-start但与 相同steps(1, start)）：

使用这个计时函数，动画立即跳转到结束状态并停留在那个位置直到动画结束。

第一次迭代的第一步在页面加载（或添加类）后立即发生，因此，背景图像立即移动到to框架内指示的位置。对于第 2 次迭代，返回其原始位置（from帧）然后再次移动到最终位置（to帧）的过程会立即发生，这意味着您看不到任何视觉差异，并且元素看起来好像停留在它的位置没有任何动画的地方。

.dangerous_b {
  width: 636px;
  height: 72px;
  background-image: url('http://i.imgur.com/fA80qQc.png');
  float: left;
  background-color: black;
  animation: bganim 1s steps(1, start) infinite;
}
@keyframes bganim {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 0px -72px;
  }
}

<div class='dangerous_b'></div>

在这个小提琴中也可以看到相同的行为。这不是我的创作，而是对作为designmodo的演示的改编。第一辆车从未真正移动（或从未真正看到移动），因为这一步发生在开始时。

解决方案1：使用两步并将结束背景位置加倍

当没有。步数设置为两个，动画作为一个两步过程发生，其中第一步再次发生在动画开始时（因为start参数）。这意味着：

• 在第一步中，背景移动到开始和结束状态之间的一半距离。
• 由于第一步发生在开始时，background-position因此永远不会0px 0px。（请注意，我已将结尾翻了一番background-position）。
• 第二步，背景移动到最终位置。因为背景图像是重复的，0px -144px所以 等于0px 0px。这会产生背景移动到其原始位置的错觉。

.dangerous_b {
  width: 636px;
  height: 72px;
  background-image: url('http://i.imgur.com/fA80qQc.png');
  float: left;
  background-color: black;
  animation: bganim 1s steps(2, start) infinite;
}
@keyframes bganim {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 0px -144px;
  }
}

<div class='dangerous_b'></div>

解决方案 2：仅使用一步，但将结束位置更改为一半

出于某种原因，这似乎模仿了两步动画。

• 在前半部分，背景移动到50%帧内指示的位置。
• 下半场似乎又回到了原来的位置（或100%位置，两者都一样）。因此，当下一次迭代开始并且图像跳跃时，它会从一个0%或一个100%位置移动到另一个位置，50%并最终产生所需的动画效果。

.dangerous_b {
  width: 636px;
  height: 72px;
  background-image: url('http://i.imgur.com/fA80qQc.png');
  float: left;
  background-color: black;
  animation: bganim 1s steps(1, start) infinite;
}
@keyframes bganim {
  0% {
    background-position: 0px 0px;
  }
  50% {
    background-position: 0px -72px;
  }
  100% {
    background-position: 0px 0px;
  }
}

<div class='dangerous_b'></div>