Закрыть   X

  •    
  •    
Печать

animation

Автор: Алексей Елизаров.

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;}

}


 


© 2018 cssprofi.ru.Алексей Елизаров. Все права защищены
cssprofi.ru - запрещено использование материалов сайта без согласия его автора и обратной ссылки