We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

Описание

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

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

Синтаксис

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

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,