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

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

Часто удобно использовать сокращённое свойство animation, чтобы задать все свойства анимации одновременно.

Попробуйте

animation-fill-mode: none;
animation-delay: 1s;

animation-fill-mode: forwards;
animation-delay: 1s;

animation-fill-mode: backwards;
animation-delay: 1s;

animation-fill-mode: both;
animation-delay: 1s;

<section class="flex-column" id="default-example">
  <div>Animation <span id="play-status"></span></div>
  <div id="example-element">Select a mode to start!</div>
</section>

#example-element {
  background-color: #1766aa;
  color: white;
  margin: auto;
  margin-left: 0;
  border: 5px solid #333333;
  width: 150px;
  height: 150px;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#play-status {
  font-weight: bold;
}

.animating {
  animation: slide 1s ease-in 1;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

const el = document.getElementById("example-element");
const status = document.getElementById("play-status");

function update() {
  status.textContent = "delaying";
  el.className = "";
  window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => {
      el.className = "animating";
    });
  });
}

el.addEventListener("animationstart", () => {
  status.textContent = "playing";
});

el.addEventListener("animationend", () => {
  status.textContent = "finished";
});

const observer = new MutationObserver(() => {
  update();
});

observer.observe(el, {
  attributes: true,
  attributeFilter: ["style"],
});

update();

Синтаксис

/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

/* Global values */
animation-fill-mode: inherit;
animation-fill-mode: initial;
animation-fill-mode: revert;
animation-fill-mode: revert-layer;
animation-fill-mode: unset;

Значения

Это свойство задаётся списком следующих ключевых слов, разделённых запятыми:

none

Анимация не будет применять стили к целевому элементу, когда она не выполняется. Вместо этого элемент будет отображаться с применением других правил CSS, заданных для него. Это значение по умолчанию.

forwards

Целевой элемент сохранит вычисленные значения, заданные последним ключевым кадром, достигнутым во время выполнения. Последний ключевой кадр зависит от значений свойств animation-direction и animation-iteration-count:

animation-direction	animation-iteration-count	последний достигнутый ключевой кадр
normal	чётное или нечётное	100% или to
reverse	чётное или нечётное	0% или from
alternate	чётное	0% или from
alternate	нечётное	100% или to
alternate-reverse	чётное	100% или to
alternate-reverse	нечётное	0% или from

Анимированные свойства ведут себя так, как если бы они были включены в заданное значение свойства will-change. Если во время анимации был создан новый контекст наложения, целевой элемент сохраняет его после завершения анимации.

backwards

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

animation-direction	первый соответствующий ключевой кадр
normal или alternate	0% или from
reverse или alternate-reverse	100% или to

both

Анимация будет следовать правилам для обоих вариантов — вперёд и назад, тем самым продлевая действие свойств анимации в обоих направлениях.

Формальное определение

Формальный синтаксис

animation-fill-mode = 
  <single-animation-fill-mode>#

<single-animation-fill-mode> = 
  none |
  forwards |
  backwards |
  both

Примеры

Задание режима заливки

Эффект animation-fill-mode показан в следующем примере. В нём демонстрируется, как можно сохранить анимацию в её конечном состоянии, а не возвращать её к исходному состоянию (которое используется по умолчанию).

HTML

<p>Move your mouse over the gray box!</p>
<div class="demo">
  <div class="grows-and-stays">This grows and stays big.</div>
  <div class="grows">This just grows.</div>
</div>

CSS

.demo {
  border-top: 100px solid #cccccc;
  height: 300px;
}

@keyframes grow {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 40px;
  }
}

.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
}

.demo:hover .grows-and-stays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Результат

Другие примеры см. в разделе CSS-анимации.

Спецификации

Совместимость с браузерами

См. также

• Использование CSS-анимаций
• API AnimationEvent в JavaScript
• Другие связанные свойства анимации: animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function