[melky]

Тем не менее не нужно дрюкать ДОМ.
А если спрайт содержит слишком много кадров, то css можно сгенерировать через JS.

всё верно. не ругайтесь на анимации, я начинаю shit bricks, что называется.

в общем, всё на самом деле просто. есть такой свойство, называется animation-timing-function, и оно имеет описание на mdn
там написано, что существует функция steps. от неё и пляшите.

ну и ещё animation-play-state, для того, чтобы её приостановить и продолжить, когда надо.

ну и вот вам пример в тему !

<style>
div {
    background-image : url(http://test.nizarium.com/sprite/sprite.png);
    height:32px;
    width:32px;
    position:absolute;
    
    -moz-animation: sprite 0.5s steps(3, start) 0s infinite normal;
    -moz-animation-play-state:paused;
    -webkit-animation: sprite 0.5s steps(3, start) 0s infinite normal;
    -webkit-animation-play-state:paused;
}

@-moz-keyframes sprite {
    from { background-position: 0 0; } to { background-position: -96px 0; }
}
@-webkit-keyframes sprite {
    from { background-position: 0 0; } to { background-position: -96px 0; }
}

div:hover {
    -moz-animation-play-state:running;
    -webkit-animation-play-state:running;
}​
</style>

<div></div>

Вуаля !