MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

Описание

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

Начальное значениеnone
Применяется квсе элементы, ::before и ::after псевдоэлементы
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Анимируемостьнет
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

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 заданы одновременно.

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

<single-animation-fill-mode>#

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

Пример

Вы можете посмотреть эффект 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 Status Comment
CSS Animations
Определение 'animation-fill-mode' в этой спецификации.
Рабочий черновик Initial definition

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Да)-webkit
43.0
5.0 (5.0)-moz
16.0 (16.0)
10 12-o
12.10
4.0-webkit
Feature Android Chrome Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support ? ? ? ? ? ? ?

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

Метки документа и участники

 Внесли вклад в эту страницу: Asrover, andreww2012
 Обновлялась последний раз: Asrover,