Свойство animation-direction

В обычном состоянии анимация проигрывается от начала до конца, затем резко, в один момент возвращается в свое первоначальное состояние и, в зависимости от настроек animation-iteration-count, либо повторяется снова, либо больше не воспроизводится.

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

Итак, рассмотрим поближе значения свойства animation-direction:

• normal — значение по умолчанию. Анимация воспроизводится от начала до конца, затем резко возвращается к первоначальному состоянию.
• alternate — анимация воспроизводится от начала до конца, после чего плавно возвращается к исходному состоянию, что напоминает перемотку назад. Эффект от этого значения не будет заметен, если анимация проигрывается всего один раз.
• reverse — анимация воспроизводится с конца в начало реверсом, затем резко возвращается в первоначальное состояние, т. е. к первому ключевому кадру.
• alternate-reverse — значение, объединяющее в себе два предыдущих. Анимация воспроизводится с конца в начало, после чего плавно возвращается в исходное состояние, т. е. к первому ключевому кадру. Эффект от этого значения не будет заметен, если анимация проигрывается всего один раз.

Чтобы указать направление анимации, добавьте правило к стилю элемента:

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

Далее в учебнике: свойство animation-fill-mode для управления конечным стилем анимации.