Сокращенные свойства CSS: animation

Development | Amber | Комментировать запись

Сокращенные свойства CSS позволяют определять значения нескольких других свойств одновременно. При помощи сокращенных свойств вы можете писать более короткие (и часто более читаемые) таблицы стилей, экономя при этом время.

Сокращенное свойство animation позволяет запускать анимации в CSS. Оно имеет такой синтаксис: 

animation: crazy 4s ease-in-out 0.5s 12 backwards;

Где: 

• crazy: название анимации
• 4s: продолжительность
• ease-in-out: тайминг
• 0.5s: задержка
• 12: счетчик итераций
• backwards: режим заполнения

Примечание: Свойство CSS является анимируемым, если его значение может изменяться в течение заданного периода времени. Некоторые свойства CSS можно анимировать с помощью сокращенных свойств CSS animation или transition. Свойства CSS, определяющие параметры анимации, такие как animation-direction и animation-name, не подлежат анимации, поскольку их анимация создаст сложное рекурсивное поведение.

Функция animation-timing-function может принимать одно из следующих значений: linear, ease, ease-in, ease-out, ease-in-out или cubic-bezier(…).

Функция animation-fill-mode может принимать такие значения: none, forwards, backwarts или both.

Читайте также: Сокращенные свойства CSS: transition