移动一张长长的照片，就好像用css眨眼一样

Question

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

overflow:hidden;

我希望动画这张照片，就像它眨眼一样。看起来像：第一部分显示第一部分，第二部分显示第二部分 [要求：请不要让动画像它从下到上滑动。 ]

这是我的工作方式，而不是工作。 1.使用关键帧，如20％，40％，60％，80％，100％。添加顶部：-40，-80，...;但看起来我正在滑动图片。 希望有人可以帮助我。非常感谢。

Answer 1

您可以使用steps()函数应用于简单的CSS3背景动画，如此

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

  

steps（）函数表示法定义了以等距步骤划分输出值域的步进函数。这个阶梯函数的子类有时也称为阶梯函数。

Answer 2

你的意思是......就像这里：http://jsfiddle.net/5jpasp1v/

我只需添加3个div`＃39;每个州都有状态的元素，并用css

更改它

HTML：

<div id="wifi">
    <div class="state state-1"></div>
    <div class="state state-2"></div>
    <div class="state state-3"></div>
</div>

CSS：

@keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.state-1 {...}
.state-2 {...}
.state-3 {...}