Свойство animation-fill-mode

Как уже говорилось в предыдущих уроках, после прохождения цикла анимация возвращается к своему исходному положению и стилю. Это поведение не всегда бывает уместным, поэтому в CSS для таких случаев имеется свойство animation-fill-mode. Оно определяет, какой стиль будет применен к анимированному элементу по окончанию анимации.

По правде говоря, выбор здесь небольшой – по окончанию анимации элемент может принять либо первоначальный стиль, либо остаться в том стиле, который он принял в конце цикла. Представим, что вы создали анимацию прямоугольного блока: он плавно увеличивается в течение анимации, и к ее концу становится в три раза больше первоначального размера. Когда анимация завершится, ваш блок вернется в исходное состояние, то есть уменьшится в три раза. Но вы можете сохранить размер увеличенного блока, воспользовавшись свойством animation-fill-mode. Оно принимает два значения:

• forwards — по окончанию анимации элемент сохраняет стиль последнего ключевого кадра.
• none — значение по умолчанию. Элемент возвращается к исходному стилю.

Итак, чтобы блок из вышеописанного примера остался увеличенным после завершения анимации, добавьте к его стилю следующую строку:

animation-fill-mode: forwards;

Стоит отметить, что на внешний вид последнего ключевого кадра влияют значения свойств animation-iteration-count и animation-direction. К примеру, если наряду с animation-fill-mode вы задали стиль animation-direction: reverse, то после завершения анимации элемент останется с тем стилем, который определен для первого, а не последнего ключевого кадра.

Далее в учебнике: свойство animation-play-state.