Анимация изображения в веб-дизайне без на чистом CSS

Наступает время, когда формат изображения GIF уходит в прошлое. В современном браузере несложно сделать анимацию без этого формата, используя JavaScript или же чистый CCS3. Конечно, найдутся противники такой технологии, которые будут говорить, что проще использовать GIF для этих целей, но каждый для себя выберет тот способ, который ему ближе.

Итак, анимация спрайт-изображения на чистом CSS

Код css:

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://artkiev.com/blog/wp-content/uploads/2013/09/sprite.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; }
}

Код HTML:

<img src="http://artkiev.com/blog/wp-content/uploads/2013/09/sprite.png" />
<div class="hi"></div>

Работает во всех современных браузерах.