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

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

К примеру, если вы делаете выезжающее из-за края окна браузера сообщение, то после окончания анимации сообщение вернётся обратно за край экрана. Значение forwards свойства animation-fill-mode изменяет это поведение и оставляет стили на момент завершения движения. Таким образом, сообщение плавно выдвинется из-за края окна и останется на месте.

CSS синтаксис

animation-fill-mode: none | forwards | backwards | both | initial | inherit;

Возможные значения

Значение Описание
none Значение по умолчанию. К элементу не применяются какие-либо стили.
forwards Как только анимация будет завершена, значения, определённые в последнем ключевом кадре, сохранятся до тех пор, пока стиль анимации не будет удалён из любого селектора, нацеленного на данный узел.
backwards К элементу применяется стиль первого ключевого кадра, и он остаётся на протяжении периода заданного animation-delay.
both К элементу применяются оба правила, как для forwards, так и для backwards.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

После проигрывания анимации элемент останется там, где анимация закончилась


div {
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;
}