Move a long picture as it blinks with css

Question

As can be seen from the figure, it includes 6 parts. I am creating a 40px by 40px div containing this image.

overflow:hidden;

I want to bring this picture to life as if it were blinking. which looks like this: on the 1st second, the first part is displayed, the second is the second.
[Requirement: please do not make animations like “Slide” from bottom to top. ]

This is how I did it, it doesn’t work. 1. the use of a key frame, for example 20%, 40%, 60%, 80%, 100%. add top: -40, -80, ...; but it looks like I'm taking a picture. hope someone can help me. Many thanks.

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

() , . .

Answer 2

sth, : http://jsfiddle.net/5jpasp1v/

3 `div ' 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 {...}