move a long picture like it's blinking with css - html

Question

As you can see from the picture, it includes 6 parts.
I build a div 40px by 40px containing this picture.
overflow:hidden;
I want to animate this picture like it's blinking. which looks like: at the 1st second showing 1st part, the second showing the second part.
[Requirement: please don't make the animation like It's slide from bottom to top. ]
Here's how I did, not working.
1.using keyframe, like 20%, 40%, 60%, 80%, 100%. add top:-40, -80,...; but it looks like I'm slide the picture.
hope someone can help me out. Thanks a lot.

Answer 1

You can use the steps() function applied to a simple CSS3 background animation like so
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 }
}
From 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.

Answer 2

Do You mean about sth like here: http://jsfiddle.net/5jpasp1v/
I've simply add 3 `div' elements with state for each state, and change it with 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 {...}