Это старая версия документа!
# CSS свойство Animation
## Синтаксис ``` animation: animation-duration || animation-timing-function ||
animation-delay || animation-iteration-count || animation-direction || animation-fill-mode || animation-play-state || [none | animation-name]
```
## Значения Любые комбинации значений, разделяемых между собой пробелом, определяющих параметры анимации.
Значение по умолчанию :
* - animation-name: none * - [animation-duration] (#animation-duration): 0s * - animation-timing-function: ease * - animation-delay: 0s * - animation-iteration-count: 1 * - animation-direction: normal * - animation-fill-mode: none * - animation-play-state: running
### animation-duration Задаёт время в секундах или миллисекундах, сколько должен длиться один цикл анимации. По умолчанию значение равно 0s, это означает, что никакой анимации нет. Можно указать несколько значений, перечисляя их через запятую. Отрицательные значения и значения без указания единиц времени (s или ms) недопустимы и будут игнорироваться.
### animation-timing-function Устанавливает, согласно какой функции времени должна происходить анимация каждого цикла между ключевыми кадрами. Синтаксис ``` animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear |
step-start | step-end | steps | cubic-bezier
``` - ease - Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1). - ease-in - Анимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1). - ease-out - Анимация начинается быстро, к концу замедляется. Аналогично cubic-bezier(0,0,0.58,1). - ease-in-out - Анимация начинается и заканчивается медленно. Аналогично cubic-bezier(0.42,0,0.58,1). - linear - Одинаковая скорость от начала и до конца. - step-start - Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение. - step-end - Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение. - steps - Ступенчатая функция, имеющая заданное число шагов.
``` animation-timing-function: steps(<число>, start | end) ```
Здесь: <число> — целое число больше нуля; start — задаёт [полунепрерывную снизу функцию](http://ru.wikipedia.org/wiki/Полунепрерывная_функция); end — задаёт полунепрерывную сверху функцию. - cubic-bezier - Задаёт функцию движения в виде [кривой Безье](http://ru.wikipedia.org/wiki/Кривая_Безье).
### animation-delay Устанавливает время ожидания перед запуском цикла анимации. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации. Допустимо указывать несколько значений, перечисляя их через запятую.