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

Свойство animation-fill-mode определяет применение стилей к элементу, когда анимация не проигрывается (перед стартом, после завершения или в обеих случаях).

Свойство animation-fill-mode является единственным свойством, которое влияет на элемент перед проигрыванием первой @keyframe или же после проигрывания последней keyframe. Имеет следующие значения: "forwards", определяющее, что элемент должен сохранять стилевые значения, установленные последним keyframe (зависит от свойств animation-iteration-count и animation-direction); "backwards", определяющее, что элемент должен иметь стилевые значения, установленные первым keyframe (зависит от свойства animation-delay), и сохранять их в период animation-delay; "both", определяющее, что элемент должен следовать правилам для "forwards" и "backwards"; и "none" (значение по умолчанию), определяющее, что стили не будут применены к элементам до или после проигрывания анимации.

Значение по умолчанию none
Применяется Ко всем элементам, а также к псевдоэлементам ::before и ::after.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.animationFillMode = "forwards";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #1c87c9;
      position: relative;
      -webkit-animation: element 5s;  /* Safari 4.0 - 8.0 */
      -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
      animation: element 5s;
      animation-fill-mode: forwards;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
      from {top: 0px;}
      to {top: 200px; background-color: blue;}
      }
      @keyframes element {
      from {top: 0px;}
      to {top: 200px; background-color: #8ebf42;}
      }
    </style>
  </head>
  <body>
    <h2>Пример animation-fill-mode</h2>
    <div></div>
  </body>
</html>

Пример, где установлено значение "backwards":

Пример

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #1c87c9;
      position: relative;
      -webkit-animation: element 5s;  /* Safari 4.0 - 8.0 */
      -webkit-animation-fill-mode: backwards; /* Safari 4.0 - 8.0 */
      animation: element 5s;
      animation-fill-mode: backwards;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
      from {top: 0px;}
      to {top: 200px; background-color: blue;}
      }
      @keyframes element {
      from {top: 0px;}
      to {top: 200px; background-color: #8ebf42;}
      }
    </style>
  </head>
  <body>
    <h2>Пример animation-fill-mode</h2>
    <div></div>
  </body>
</html>

Значения

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

Поддержка браузера

chrome firefox safari opera
43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Практикуйте свои знания

What does the CSS property 'animation-fill-mode' do?
Считаете ли это полезным?