Safari и Chrome поддерживают альтернативное свойство: "-webkit-animation".
Примечание: не поддерживается в IE9 и более ранних версиях.
Свойство animation позволяет установить несколько или все значения свойств animation в одном объявлении.
В список свойств, значения которых можно использовать входят: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count и animation-direction.
Всегда указывайте свойство animation-duration, если его не указать это будет означать, что продолжительность равна 0 и анимация не будет проигрываться.
| Значение по умолчанию: |
none 0 ease 0 1 normal |
| Наследуется: |
нет |
| Версия: |
CSS3 |
| Синтаксис JavaScript: |
object.style.animation="mymove 5s infinite" |
| Значение |
Описание |
| animation-name |
Определяет имя для @keyframes. |
| animation-duration |
Определяет сколько секунд или миллисекунд понадобится, чтобы закончить 1 цикл анимации. |
| animation-timing-function |
Определяет кривую скорости для анимации. |
| animation-delay |
Определяет, когда запустится анимация. |
| animation-iteration-count |
Определяет сколько раз анимация должна будет проигрываться. |
| animation-direction |
Указывает будет ли анимация проигрываться в реверсе на альтернативных циклах. |
Пример
html
head
style type="text/css"
div.primer {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite; /*Firefox*/
-webkit-animation: mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove {
from { left:0px; }
to { left:540px; }
}
@-moz-keyframes mymove /*Firefox*/{
from { left:0px; }
to { left:540px; }
}
@-webkit-keyframes mymove /*Safari and Chrome*/{
from { left:0px; }
to { left:540px; }
}
/style
/head
body
div class="primer"/div
/body
/html