⑫ Краткая запись анимации: свойство animation и Множественные анимации

Продолжим изучение темы CSS3 - анимация. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Введение в CSS3-анимацию
• ② Ключевые кадры
• ③ Временная функция для ключевых кадров
• ④ Название анимации: свойство animation-name
• ⑤ Продолжительность анимации: свойство animation-duration
• ⑥ Временная функция: свойство animation-timing-function
• ⑦ Повтор анимации: свойство animation-iteration-count
• ⑧ Направление анимации: свойство animation-direction
• ⑨ Проигрывание анимации: свойство animation-play-state
• ⑩ Задержка анимации: свойство animation-delay
• ⑪ Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode

Краткая запись анимации: свойство animation

Все параметры воспроизведения анимации можно объединить в одном свойстве — animation, перечислив их через пробел:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration, остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay.

Множественные анимации

Для одного элемента можно задавать несколько анимаций, перечислив их названия через запятую:

CSS

div {
  animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;
}

Источник ↗