Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.03.2012, 23:14
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

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.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #2 (permalink)  
Старый 18.03.2012, 23:21
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Недавно на хабре статью видел на эту тему.
Вот http://habrahabr.ru/post/119721/
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 18.03.2012, 23:32
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

В жопу такую css анимацию, проще на js одну строчку написать, чем таким колдунством заниматься. Спасибо большое, а то я уже полинета перерыл, думал что туплю и есть простое решение.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #4 (permalink)  
Старый 19.03.2012, 03:54
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Тем не менее не нужно дрюкать ДОМ.
А если спрайт содержит слишком много кадров, то css можно сгенерировать через JS.
__________________
"Matreshka is fucking awesome" © чувак с Reddit
Matreshka.js - Три возможности
Ответить с цитированием
  #5 (permalink)  
Старый 19.03.2012, 10:23
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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


Вуаля !
Ответить с цитированием
  #6 (permalink)  
Старый 19.03.2012, 11:18
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

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

Сообщение от melky Посмотреть сообщение
Вуаля !
Вуаля не работает в Опере. За 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 работает, ура товарищи.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.

Последний раз редактировалось Gozar, 19.03.2012 в 13:16.
Ответить с цитированием
  #7 (permalink)  
Старый 20.03.2012, 00:35
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Gozar Посмотреть сообщение
Вуаля не работает в Опере.
потому что в ней нет css-анимаций.

..
сказано, что в 12 опере будет.. скачал альфу, и получил шиш.
Ответить с цитированием
  #8 (permalink)  
Старый 20.03.2012, 01:19
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Сообщение от melky
сказано, что в 12 опере будет.. скачал альфу, и получил шиш.
Опера такая опера.
__________________
"Matreshka is fucking awesome" © чувак с Reddit
Matreshka.js - Три возможности
Ответить с цитированием
  #9 (permalink)  
Старый 20.03.2012, 16:18
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

Сообщение от melky Посмотреть сообщение
сказано, что в 12 опере будет.. скачал альфу, и получил шиш.
Может допилят, надеюсь, на то она и альфа. Хотя ... а, не важно, я переживу, у меня оно все равно подходит под Graceful Degradation.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #10 (permalink)  
Старый 27.03.2012, 13:11
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS3 свойства и единицы измерения. devote Оффтопик 28 12.03.2012 13:45
совместимость с CSS3 Nightmare jQuery 3 18.01.2012 19:39
CSS3 анимации, используя JS FINoM Общие вопросы Javascript 2 27.12.2011 23:18
css3 размер scroll'а у div'а cmygeHm (X)HTML/CSS 9 29.03.2011 21:05
CSS3 3 примера flash и сss3 mycoding Оффтопик 4 25.07.2010 15:15