I've tried the "-webkit-animation-fill-mode: forwards;" but I can't seem to make it work, it just getting paused on the first frame, can someone help me out?
<div class="logo"></div>
.logo {
width: 328px;
height: 187px;
background-image: url("http://u.cubeupload.com/amitkilo/opti.png");
-webkit-animation: play 2.0s steps(60);
-moz-animation: play 2.0s steps(60);
-ms-animation: play 2.0s steps(60);
-o-animation: play 2.0s steps(60);
animation: play 2.0s steps(60);
}
@-webkit-keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -11220px; }
}
@-moz-keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -11220px; }
}
@-ms-keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -11220px; }
}
@-o-keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -11220px; }
}
@keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -11220px; }
}