animation-fill-mode
Пусть элемент <div> сохранит значения стиля из последнего ключевого кадра, когда анимация закончится:
div {
animation-fill-mode: forwards;
}
Попробуйте сами »
Определение animation-fill-mode
CSS свойство animation-fill-mode
определяет стиль для элемента, когда анимация не воспроизводится (до ее начала, после ее окончания или и то, и другое).
CSS Анимация не влияет на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра. CSS свойство animation-fill-mode
может переопределять это поведение.
Значение по умолчанию: | none |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.animationFillMode="forwards" Попробуй |
Поддержка animation-fill-mode
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следуют -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
animation-fill-mode | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.1 12.0 -o- |
Синтаксис animation-fill-mode
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Значения свойств
Значение | Описание |
---|---|
none | Значение по умолчанию. Анимация не будет применять никаких стилей к элементу до или после его выполнения |
forwards | Элемент сохранит значения стиля, заданные последним ключевым кадром (зависит от направления анимации и количества итераций анимации). |
backwards | Элемент получит значения стиля, заданные первым ключевым кадром (зависит от направления анимации), и сохранит их в течение периода задержки анимации |
both | Анимация будет следовать правилам как для прямого, так и для обратного хода, расширяя свойства анимации в обоих направлениях |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры animation-fill-mode
Пусть элемент <div> получит значения стиля, заданные первым ключевым кадром перед началом анимации (в течение периода задержки анимации):
div {
animation-fill-mode: backwards;
}
Попробуйте сами »
Пусть элемент <div> получает значения стиля, заданные первым ключевым кадром перед началом анимации, и сохраняет значения стиля из последнего ключевого кадра, когда анимация заканчивается:
div {
animation-fill-mode: both;
}
Попробуйте сами »
Страницы по теме animation-fill-mode
CSS Учебник: CSS Анимация
HTML DOM справочник: animationFillMode свойство