CSS свойство animation
Поддержка браузеров
Описание
Свойство 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 |
Указывает будет ли анимация проигрываться в реверсе на альтернативных циклах. |
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;}
}
