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