Запуск анимации: аnimation-name и animation-duration

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

Свойство animation-name

Свойство animation-name позволяет привязать к элементу одну или больше анимаций. Для примера возьмем ту анимацию, которую мы создали на прошлом уроке. Мы задали ей имя changeBackgroundColor (оно указано сразу после слова @keyframes). Теперь, чтобы применить ее, например, к элементу <div> с классом .traffic-light, нужно написать такой код:

.traffic-light {
    animation-name: changeBackgroundColor;
}

Итак, мы сообщили браузеру, какую анимацию нужно применить к элементу .traffic-light, указав ее имя в качестве значения свойства animation-name. Но чтобы анимация выполнилась, потребуется задать еще и ее длительность.

Свойство animation-duration

Данное свойство похоже на рассмотренное нами ранее свойство transition-duration. Оно принимает аналогичные значения времени и устанавливает продолжительность анимации для конкретного элемента.

Предположим, мы хотим, чтобы анимация с именем changeBackgroundColor, примененная к элементу .traffic-light, длилась 6 секунд. Добавим к стилю еще одну строку:

.traffic-light {
    animation-name: changeBackgroundColor;
    animation-duration: 6s;
}

Рядом со свойствами для запуска анимации допускается записывать и другие стили элемента. Так, полный CSS-код для нашего блока выглядит следующим образом:

.traffic-light {
    animation-name: changeBackgroundColor;
    animation-duration: 6s;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red;
}

Результат работы анимации показан на GIF-изображении ниже:

Подключение нескольких анимаций

К одному элементу можно применить сразу две или больше анимаций. Для этого следует перечислить их названия через запятую в свойстве animation-name. Если при этом вы хотите задать разную длительность для каждой анимации (animation-duration), то перечислите в таком же порядке время исполнения:

.traffic-light {
    animation-name: firstAnimation, secondAnimation;
    animation-duration: 3s, 1s;
}

Порядок расположения названий анимаций в свойстве animation-name влияет на последовательность их выполнения. В примере выше сначала будет воспроизведена анимация под названием firstAnimation длительностью 3 секунды, а затем запустится анимация secondAnimation с продолжительностью 1 секунда.

Далее в учебнике: свойства animation-timing-function и animation-delay.