CSS3 Animation
Синтаксис
animation: name duration timing-function delay iteration-count direction;
animation-name
Имя анимации (@keyframe), которое будет привязываться к селектору
animation-duration
Длительность анимации в секундах (s) или миллисекундах (ms)
animation-timing-function
Определяет скорость кривой анимации. Функция анимации использует математические функции, так называемую кривую Безье, чтобы управлять скоростью по кривой. Можно использовать одно из предопределенных значений:
linear — равномерная скорость с начала до конца
ease — это значение установлено по умолчанию. Анимация начинается медленно, затем ускоряется, а к концу опять замедляется.
ease-in — медленно начинается, постепенно ускоряясь.
ease-out — при этом параметре анимация замедляется в конце.
ease-in-out — медленный старт и медленное завершение.
Или создать свои значения этой функции: cubic-bezier(n,n,n,n). Допускаются числовые значения, в том числе и отрицательные. Например:
#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}Увидеть различия этих параметров можно на примере.
Настроить и поиграться с cubic-bezier можно на сайте http://cubic-bezier.com
animation-delay
Определяет задержку перед началом анимации. Задается в секундах (s) или миллисекундах (ms).
animation-iteration-count
Определяет количество циклов анимации. Задевается числом или infinite (бесконечно)
animation-direction
Определяет, должна ли анимация проигрываться в обратном направлении по завершению цикла. По умолчанию normal, проигрывание в обратном направление — alternate.
