animation-fill-mode

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

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 #ccc;
  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-анимаций
• JavaScript AnimationEvent API
• Другие связанные свойства анимации: animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function