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	Значение элемента наследуется от родительского элемента.