CSS3 steps Animation | Running Animation

Horse running animation using css3

by Shishir Morshed

HTML

<div class="horse-animation"></div>

CSS

body {background: #fff;}
.horse-animation {
    width: 380px;
    height: 302px;
    background: url('http://shishirmorshed.github.io/cloud-resources/images/external/horse-sprite.jpg') 0 0 no-repeat;
    margin: 0 auto;
    background-size: cover;
    /* border: 1px solid; */
    -webkit-animation: kf_horse_running 1s steps(8) infinite;
    -moz-animation: kf_horse_running 1s steps(8) infinite;
    -o-animation: kf_horse_running 1s steps(8) infinite;
    animation: kf_horse_running 1s steps(8) infinite;
}

@-webkit-keyframes kf_horse_running {
    0% {background-position: 0 0; } 
    100% {background-position: 0 -2416px; }
}
@-moz-keyframes kf_horse_running {
    0% {background-position: 0 0; } 
    100% {background-position: 0 -2416px; } 
}
@-o-keyframes kf_horse_running {
    0% {background-position: 0 0; } 
    100% {background-position: 0 -2416px; }
}
@-keyframes kf_horse_running {
    0% {background-position: 0 0; } 
    100% {background-position: 0 -2416px; } 
}