html - 移动一张长图片，就像它用 css 闪烁一样

Question

从图中可以看出，它包括6个部分。我构建了一个包含这张图片的 40px x 40px 的 div。

overflow:hidden;

我想为这张图片制作动画，就像它在闪烁一样。看起来像:第一秒显示第一部分，第二秒显示第二部分。
【要求:请不要把动画做成从下往上滑的样子。 ]

这是我做的，没有工作。1.使用关键帧，如20%、40%、60%、80%、100%。添加顶部:-40，-80，...；但看起来我正在滑动图片。希望有人能帮助我。非常感谢。

Answer 1

您可以像这样使用应用于简单 CSS3 背景动画的 steps() 函数

http://codepen.io/anon/pen/JoEoPL

---

HTML

<div>Acquiring signal...</div>

CSS

div {
  background-repeat: no-repeat;
  background-image: url(http://i.stack.imgur.com/CAIVQ.png);
  width: 80px;
  height: 80px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;

  -webkit-animation: blinksignal 6s steps(6, end) infinite;
  animation: blinksignal 6s steps(6, end) infinite;
}


@-webkit-keyframes blinksignal {
  0%   { background-position: 0 0 }
  100% { background-position: 0 -480px }
}

@keyframes blinksignal {
  0    { background-position: 0 0 }
  100% { background-position: 0 -480px }
}

---

来自 MDN

The steps() functional notation defines a step function dividing the domain of output values in equidistant steps. This subclass of step functions are sometimes also called staircase functions.