css3 steps animation

by narensrinivasans

HTML

<div class="doodle">
    <!-- css3 steps animation -->
</div>

CSS

.doodle {
    animation: 0.5s steps(12, end) 2s normal none infinite horse-ride;
    -webkit-animation: 0.5s steps(12, end) 2s normal none infinite horse-ride;
    -moz-animation: 0.5s steps(12, end) 2s normal none infinite horse-ride;
    background: url("http://www.google.com/logos/2012/muybridge12-hp-f.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 54px;
    position: relative;
    width: 54px;
}
@keyframes horse-ride {
0% {
    background-position: 0 0;
}
100% {
    background-position: -804px 0;
}
}
@-webkit-keyframes horse-ride {
0% {
    background-position: 0 0;
}
100% {
    background-position: -804px 0;
}
}
@-moz-keyframes horse-ride {
0% {
    background-position: 0 0;
}
100% {
    background-position: -804px 0;
}
}