Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   CSS3 animation рывками (https://javascript.ru/forum/xhtml-html-css/26704-css3-animation-ryvkami.html)

Gozar 18.03.2012 21:14

CSS3 animation рывками
 
Есть 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 18.03.2012 21:21

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

Gozar 18.03.2012 21:32

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

FINoM 19.03.2012 01:54

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

melky 19.03.2012 08:23

Цитата:

Сообщение от FINoM (Сообщение 163920)
Тем не менее не нужно дрюкать ДОМ.
А если спрайт содержит слишком много кадров, то 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 19.03.2012 09:18

Цитата:

Сообщение от melky (Сообщение 163936)
я начинаю shit bricks, что называется.

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

Цитата:

Сообщение от melky (Сообщение 163936)
Вуаля !

Вуаля не работает в Опере. За 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 19.03.2012 22:35

Цитата:

Сообщение от Gozar (Сообщение 163940)
Вуаля не работает в Опере.

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

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

FINoM 19.03.2012 23:19

Цитата:

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

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

Gozar 20.03.2012 14:18

Цитата:

Сообщение от melky (Сообщение 164036)
сказано, что в 12 опере будет.. скачал альфу, и получил шиш.

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

Seva1986 27.03.2012 12:11

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


Часовой пояс GMT +3, время: 10:45.