# CSS свойство Animation ## Синтаксис ```CSS 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 Устанавливает, согласно какой функции времени должна происходить анимация каждого цикла между ключевыми кадрами. Синтаксис ```CSS 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** - Ступенчатая функция, имеющая заданное число шагов. Пример для steps: ```CSS animation-timing-function: steps(<число>, start | end) ``` Здесь: **<число>** — целое число больше нуля; **start** — задаёт [полунепрерывную снизу функцию](http://ru.wikipedia.org/wiki/Полунепрерывная_функция); **end** — задаёт полунепрерывную сверху функцию. - **cubic-bezier** - Задаёт функцию движения в виде [кривой Безье](http://ru.wikipedia.org/wiki/Кривая_Безье). ### animation-delay Устанавливает **время ожидания перед запуском** цикла анимации. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации. Допустимо указывать несколько значений, перечисляя их через запятую. ### animation-iteration-count Свойство определяет, **сколько раз проигрывать цикл анимации до её остановки**. Синтаксис ``` animation-iteration-count: infinite | <число> ``` Значения - **infinite** - Анимация повторяется бесконечно. - **<число>** - Сколько раз должна повторяться анимация. Отрицательные значения не допустимы. Можно использовать числа меньше единицы, для примера 0.5 будет означать половину цикла анимации. ### animation-direction Устанавливает **направление движения** анимации. Синтаксис ``` animation-direction: normal | alternate | reverse | alternate-reverse ``` Значения - **normal** - Анимация идёт с самого начала, после завершения цикла возвращается к исходному состоянию. - **alternate** - Анимация идёт с начала до конца, затем плавно возвращается в исходное положение. - **reverse** - Анимация идёт с конца цикла, после его завершения возвращается к исходному состоянию. - **alternate-reverse** - Анимация идёт с конца до начала, затем плавно возвращается в исходное положение. ### animation-fill-mode Определяет, **какие стили должны применяться к элементу, когда анимация не проигрывается**. Например, после её завершения или при остановке. По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство animation-fill-mode позволяет изменить это поведение и сделать так, чтобы стиль элемента оставался как у последнего ключевого кадра. К примеру, если вы делаете выезжающее из-за края окна браузера сообщение, то после окончания анимации сообщение вернётся обратно за край экрана. Значение forwards свойства animation-fill-mode изменяет это поведение и оставляет стили на момент завершения движения. Таким образом, сообщение плавно выдвинется из-за края окна и останется на месте. Синтаксис ``` animation-fill-mode: none | forwards | backwards | both ``` - **none** - К элементу не применяются какие-либо стили. - **forward**s - К элементу по окончанию анимации применяется стиль последнего ключевого кадра. Каким будет этот кадр в последовательности анимации зависит от комбинации значений свойств [animation-direction](https://webref.ru/css/animation-direction) и [animation-iteration-count](https://webref.ru/css/animation-iteration-count) (табл. 1). - **backwards** - К элементу применяется стиль первого ключевого кадра и он остаётся на протяжении периода заданного animation-delay. Первый ключевой кадр определяется на основании значения animation-direction (табл. 2). - **both** - К элементу применяются оба правила, как для forwards, так и для backwards. Табл. 1. Последний ключевой кадр | animation-direction | animation-iteration-count | Значение | |:---------------------|:-------|:-------| | normal | любое число | 100% или to | | reverse | любое число | 0% или from | | alternate | чётное число | 0% или from | | alternate | нечётное число | 100% или to | | alternate-reverse | чётное число | 100% или to | | alternate-reverse | нечётное число | 0% или from | Табл. 2. Первый ключевой кадр | animation-direction | Значение | |:-------|:-------|:-------| | normal или alternate | 0% или from | | reverse или alternate-reverse | 100% или to | ### animation-play-state Свойство определяет, **проигрывать анимацию или поставить её на паузу**. При продолжении установленной на паузе анимации она начинается с того момента где была остановлена. Синтаксис ``` animation-play-state: running | paused ``` Значения - **running** - Проигрывать анимацию. - **paused** - Поставить анимацию на паузу. ### animation-name Устанавливает одну или несколько анимаций, которые применяются к элементу. Представляет собой имя, связанное с правилом [@keyframes](https://webref.ru/css/keyframes), оно в свою очередь задаёт последовательность движения. Значения - **none** - Отключает анимацию. - **<идентификатор>** - Текстовая строка, которая связана с анимацией. Идентификатор должен начинаться с латинской буквы или подчёркивания (_), также может содержать цифры от 0 до 9 и дефис (-). Запрещено использовать зарезервированные ключевые слова none, unset, inherit, initial. ## @keyframes Правило **@keyframes** устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к элементу в заданный момент времени. Таким образом, анимация представляет собой плавный переход стилевых свойств от одного ключевого кадра к другому. Синтаксис ``` @keyframes <переменная> { [ from | to | <проценты> ] [, from | to | <проценты> ]* } ``` Значения - **<переменная>** - Уникальная переменная, которая связывает @keyframes с [animation](https://webref.ru/css/animation), через это свойство настраивается время анимации и другие её параметры. - **from** - Первый ключевой кадр, аналогичен 0%. - **to** - Последний ключевой кадр, аналогичен 100%. - **<проценты>** - Устанавливает ключевой кадр в процентах от времени всей анимации.