В предыдущих примерах элементы после проигрывания анимации возвращались в исходное состояние. Но есть свойство, которое определяет, будет ли видимым эффект от анимации, когда сама анимация уже закончилась — это animation-fill-mode. При задании свойству значения forwards элемент будет сохранять состояние после завершения анимации.

Рассмотрим, как работает это свойство, на примере: к двум идентичным объектам применим одинаковую анимацию, а потом у одного изменим значение свойства animation-fill-mode и посмотрим, что будет.