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

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

По умолчанию анимация @keyframes задаёт стили элементу только во время воспроизведения. В момент завершения анимации элемент резко возвращается к состоянию, заданному обычными CSS-правилами. Если задан animation-delay, элемент также отображает обычные стили в период ожидания. animation-fill-mode позволяет изменить это поведение: элемент может удерживать последний кадр после завершения или принять первый кадр ещё до старта. Это одно из свойств CSS3.

Зачем нужен animation-fill-mode

Распространённая проблема: вы анимируете блок от невидимого к видимому, но как только анимация заканчивается, элемент снова исчезает — потому что базовое правило по-прежнему задаёт opacity: 0. Установка animation-fill-mode: forwards удерживает элемент на последнем ключевом кадре, и он остаётся видимым. Именно ради этого чаще всего и используют данное свойство.

Четыре значимых значения чётко соответствуют тому, когда удерживается кадр:

none (по умолчанию) — элемент использует обычные стили до и после анимации. Ключевые кадры применяются только во время воспроизведения.
forwards — после завершения анимации элемент сохраняет стили последнего ключевого кадра (кадр to/100% при обычном воспроизведении). Выбор кадра зависит от animation-iteration-count и animation-direction.
backwards — в период animation-delay до начала анимации элемент уже отображает стили первого ключевого кадра (зависит от animation-direction).
both — применяет правила forwards и backwards: первый кадр удерживается до окончания задержки, а последний — после завершения анимации.

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

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

Синтаксис

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

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

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

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

<!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>

Попробуйте сами »

С forwards блок оказывается на 200px ниже и становится зелёным — и остаётся в этом состоянии, вместо того чтобы прыгнуть обратно на исходную позицию и вернуть синий цвет.

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

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

backwards имеет видимый эффект только при наличии animation-delay: в период задержки элемент уже отображает первый ключевой кадр. Здесь блок изначально находится в позиции from, и страница ждёт 2 секунды перед началом движения.

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

Попробуйте сами »

Во время 2-секундной задержки блок находится в позиции top: 0 и является синим — согласно первому ключевому кадру — вместо зелёного, смещённого на 200px стиля из собственного правила элемента.

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

Пример свойства CSS animation-fill-mode со значением both

both объединяет оба режима: первый ключевой кадр удерживается в период задержки, затем анимация воспроизводится, а после её завершения удерживается последний ключевой кадр.

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

Значения

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

Практика

Свойство animation-fill-mode имеет все перечисленные значения, кроме:

forwardsbackwardsalternate