animation-fill-mode

Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Описание

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

Начальное значениеnone
Применяется квсе элементы, ::before и ::after псевдоэлементы
Наследуетсянет
Обработка значениякак указано
Animation typeNot animatable

Синтаксис

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

/* Несколько значений могут быть заданы через запятую. */
/* Каждое значение соответствует для анимации в animation-name. */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

Значения

  • none
    • : Стили анимации не будут применены к элементу до и после её выполнения.
  • 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
  • backwards
    • : Элемент сохранит стиль первого ключевого кадра (en-US) на протяжении периода animation-delay. Первый ключевой кадр определяется значением animation-direction: animation-direction первый ключевой кадр
      normal или alternate 0% или from
      reverse или alternate-reverse 100% или ``to
  • both
    • : Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.

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

Error: could not find syntax for this item

Пример

Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.

HTML

<p>Наведите курсор мыши на серый блок</p>
<div class="demo">
  <div class="grows">Этот просто растёт</div>
  <div class="growsandstays">Этот растёт и остаётся большим</div>
</div>

CSS

.demo {
  border-top: 100px solid #ccc;
  height: 300px;
  font-family: sans-serif;
}
@keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
@-webkit-keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
.demo:hover .grows {
    animation-name: grow;
    animation-duration: 3s;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
    animation-name: grow;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}

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

Specification
Unknown specification
# animation-fill-mode

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

BCD tables only load in the browser

Смотрите также