This page was translated from English by the community.Learn more and join the MDN Web Docs community.
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 сентябрь 2015 г..
Экспериментальная возможность:Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотритетаблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Описание
CSS свойствоanimation-fill-mode определяет, как нужно применять стили к объекту анимации до и после её выполнения.
| Начальное значение | none |
|---|---|
| Применяется к | все элементы,::before и::afterпсевдоэлементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | Not 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-directionanimation-iteration-countпоследний ключевой кадр normalлюбое 100%илиtoreverseлюбое 0%илиfromalternateчётное 0%илиfromalternateнечётное 100%илиtoalternate-reverseчётное 100%илиtoalternate-reverseнечётное 0%илиfrombackwardsЭлемент сохранит стиль первогоключевого кадра на протяжении периода
animation-delay. Первый ключевой кадр определяется значениемanimation-direction:animation-directionпервый ключевой кадр normalилиalternate0%илиfromreverseилиalternate-reverse100%илиtobothАнимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.
Формальный синтаксис
animation-fill-mode =
<single-animation-fill-mode>#
<single-animation-fill-mode> =
none|
forwards|
backwards|
both
Пример
Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.
HTML
<p>Наведите курсор мыши на серый блок</p><div> <div>Этот просто растёт</div> <div>Этот растёт и остаётся большим</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 |
|---|
| CSS Animations Level 1 # animation-fill-mode |