CSS3 animation рывками

[Gozar]

Есть div в нем бекграунд (спрайт состоящий из кадров)

<style>@-moz-keyframes sprite {
  from { background-position: 0 0; } to { background-position: -20px 0; },
...
}

.div {
-moz-animation: 1s linear 0s normal none infinite sprite;
}</style>

Не могу понять как заставить перемещаться на 20px не плавно, а рывком(смена кадра). Нужна именно покадровая анимация, а не плавное перетекание из 0 в -20px.

[Aetae]

Недавно на хабре статью видел на эту тему.
Вот http://habrahabr.ru/post/119721/

[Gozar]

В жопу такую css анимацию, проще на js одну строчку написать, чем таким колдунством заниматься. Спасибо большое, а то я уже полинета перерыл, думал что туплю и есть простое решение.

[FINoM]

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

[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>

Вуаля !

[Gozar]

я начинаю shit bricks, что называется.

Спокойствие, я просто подумал что они забыли реализовать такую нужную функцию, а на mdn её не нашёл, отдыхать наверное нужно.

Вуаля !

Вуаля не работает в Опере. За steps спасибо.

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

@-ms-keyframes sprite {
    from { background-position: 0 0; } to { background-position: -96px 0; }
}
</style>

<div></div>

IE10 работает, ура товарищи.

[melky]

Вуаля не работает в Опере.

потому что в ней нет css-анимаций.

..
сказано, что в 12 опере будет.. скачал альфу, и получил шиш.

[FINoM]

сказано, что в 12 опере будет.. скачал альфу, и получил шиш.

Опера такая опера.

[Gozar]

сказано, что в 12 опере будет.. скачал альфу, и получил шиш.

Может допилят, надеюсь, на то она и альфа. Хотя ... а, не важно, я переживу, у меня оно все равно подходит под Graceful Degradation.

[Seva1986]

по поводу оперы и анимации
http://web-standards.ru/news/514/