Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Описание
CSS свойство animation-fill-mode
определяет, как нужно применять стили к объекту анимации до и после ее выполнения.
Начальное значение | none |
---|---|
Применяется к | все элементы, ::before и ::after псевдоэлементы |
Наследуется | нет |
Отображение | визуальный |
Обработка значения | как указано |
Animation type | discrete |
Канонический порядок | уникальный неоднозначный порядок, определённый формальной грамматикой |
Синтаксис
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;
}
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Animations Определение 'animation-fill-mode' в этой спецификации. |
Рабочий черновик | Начальное определение |
Совместимость с браузерами
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 | ? | ? | ? | ? | ? | ? | ? |