animation-fill-mode

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


12.0+	10.0+	16.0+	43.0+	12.1+	9.0+

Описание

CSS свойство animation-fill-mode определяет какие стили будут применяться к анимируемому элементу до запуска анимации и после её выполнения.

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

Синтаксис

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

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

Значение	Описание
backwards	Как только анимация будет применена, на всё время задержки её запуска используются значения, определённые для позиции 0% её ключевого кадра.
forwards	Как только анимация будет завершена, значения, определённые в последнем ключевом кадре, сохранятся до тех пор, пока стиль анимации не будет удалён из любого селектора, нацеленного на данный узел.
both	Реализуются оба значения, и forwards и backwards, как только анимация будет завершена и перед тем как она будет запущена.
none	Значение по умолчанию, не приводит ни к каким действиям или же удаляет любые действия, связанные с применением значений forwards и backwards.

Пример

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style type="text/css">
    .module {
      width: 150px;
      display: inline-block;
    }

    .wrapper {
      width: 100px;
      height: 100px;
      border-radius: 5px;
      border: 1px dashed grey;
      display: inline-block;
    }

    .element {
      width: 100px;
      height: 100px;
      border-radius: 5px;
      background-color: purple;
      transform-origin: bottom left;
    }

    .container:hover .element {
      animation-name: rotate;
      animation-duration: 1s;
      animation-timing-function: cubic-bezier(.18, 1.03, .5, 1.62);
    }

    .element-2 {
      animation-fill-mode: forwards;
    }

    .element-3 {
      animation-delay: 1s;
      animation-fill-mode: backwards;
    }

    .element-4 {
      animation-delay: 1s;
      animation-fill-mode: both;
    }

    @keyframes rotate {
      0% {
        background-color: orange;
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(90deg);
        background-color: #0099CC;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <p>
      Наведите курсор на область, чтобы применить анимацию к элементам.
    </p>
    <div class="module">
      <p><code>none</code></p>
      <div class="wrapper">
        <div class="element element-1"></div>
      </div>
    </div>
    <div class="module">
      <p><code>forwards</code></p>
      <div class="wrapper">
        <div class="element element-2"></div>
      </div>
    </div>
    <div class="module">
      <p><code>backwards</code></p>
      <div class="wrapper">
        <div class="element element-3"></div>
      </div>
    </div>
    <div class="module">
      <p><code>both</code></p>
      <div class="wrapper">
        <div class="element element-4"></div>
      </div>
    </div>
  </div>
</body>

</html>

Результат данного примера в окне браузера:

Наведите курсор на область, чтобы применить анимацию к элементам.

none

forwards

backwards

both