animation-fill-mode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

Описание

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

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

Синтаксис

css
/* Ключевые слова */
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

Элемент сохранит стиль первого ключевого кадра на протяжении периода animation-delay. Первый ключевой кадр определяется значением animation-direction:

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

Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.

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

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

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

Пример

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

HTML

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

CSS

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
CSS Animations Level 1
# animation-fill-mode

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-fill-mode
backwards
both
forwards
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

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