Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается. Например, после её завершения или при остановке. По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство animation-fill-mode позволяет изменить это поведение и сделать так, чтобы стиль элемента оставался как у последнего ключевого кадра.
К примеру, если вы делаете выезжающее из-за края окна браузера сообщение, то после окончания анимации сообщение вернётся обратно за край экрана. Значение forwards свойства animation-fill-mode изменяет это поведение и оставляет стили на момент завершения движения. Таким образом, сообщение плавно выдвинется из-за края окна и останется на месте.
CSS синтаксис
Возможные значения
| Значение | Описание |
|---|---|
| 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;
}
