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

CSS-свойство animation-fill-mode определяет, как CSS-анимация должна применять стили к своей цели до и после ее выполнения.

Значение по умолчанию:	`none`
Применяется к:	Все элементы, `::before` и `::after` псевдо-элементы
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

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

Примеры написания кода свойства animation-fill-mode:

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 4s;
    -webkit-animation-fill-mode: forwards;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`none`	Анимация не будет применять какие-либо стили к цели до или после ее выполнения..
`forwards`	После завершения анимации (как определено в свойстве `animation-iteration-count`) анимация будет применять значения свойств к моменту окончания анимации.
`backwards`	Анимация будет применять значения свойств, определенные в `@keyframe`, который запустит первую итерацию анимации, в течение периода, определенного свойством `animation-delay`. Это либо значения ключевого кадра `from` (когда `animation-direction` равно `normal`, либо `alternate`) или ключевые кадры `to` (когда `animation-direction` равно `reverse` или `alternate-reverse`).
`both`	Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направлениях.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего свойства родительского элемента `animation-fill-mode`.