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

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

animation-fill-mode является одним из свойств CSS3.

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

При указании нескольких значений, разделённых запятыми, для сокращённых свойств анимации, они применяются к соответствующим анимациям, определённым в animation-name.

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

Синтаксис

Синтаксис свойства CSS animation-fill-mode

css

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

Пример свойства animation-fill-mode со значением "forwards":

Пример использования свойства CSS animation-fill-mode со значением forwards

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        animation: element 5s;
        animation-fill-mode: forwards;
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Пример свойства animation-fill-mode со значением "backwards":

Пример использования свойства CSS animation-fill-mode со значением backwards

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        animation: element 5s;
        animation-fill-mode: backwards;
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Значения

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

Практика

Свойство animation-fill-mode имеет следующие значения, кроме:

forwardsbackwardsalternate

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

Синтаксис ​

Пример свойства animation-fill-mode со значением "forwards": ​

Пример свойства animation-fill-mode со значением "backwards": ​