How to do you animate all image sprite when you have a choosen image sprite does not contain one line images?
**This one example here has a one line image **
Link : Reference
.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
@-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}<img src="http://s.cdpn.io/79/sprite-steps.png" />
<div class="hi"></div>Now this example contains sprite images that is not one line. But contains 3 rows of sprite images. How do you animate this like the link the code snippet above? Do I use jquery/javascript in displaying it? Please help.
img {display: block;margin: auto;}
.sample {
margin: 0 auto;
width: 75px;
height: 100px;
background-image: url("https://fermmm.files.wordpress.com/2011/02/preview.jpg");
animation: play 1s steps(4) infinite;
}
@keyframes play {
from { background-position: 0px; }
to { background-position: -299px; }
}<img src="https://fermmm.files.wordpress.com/2011/02/preview.jpg" />
<div style="text-align:center;">Sprite image</div>
<div class="sample"></div>Two separate keyframe animations are created to traverse 4 frames horizontally and 3 frames vertically. When one direction animation is in play, the other one must be frozen.
Since 1s is set to go through 4 horizontal frame, so the next vertical frame would start 1s later, and therefore duration of vertical direction equals to 1s x 3 vertical frames.
img {
display: block;
margin: auto;
}
.sample {
margin: 0 auto;
width: 75px;
height: 100px;
background-image: url("https://fermmm.files.wordpress.com/2011/02/preview.jpg");
animation: playh 1s steps(4) infinite, playv 3s steps(3) infinite;
}
@keyframes playv {
0% { background-position-y: 0px; }
100% { background-position-y: -301px; }
}
@keyframes playh {
0% { background-position-x: 0px; }
100% { background-position-x: -299px; }
}<img src="https://fermmm.files.wordpress.com/2011/02/preview.jpg" />
<div style="text-align:center;">Sprite image</div>
<div class="sample"></div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments