СSS Свойство animation-fill-mode
Пример
Пусть элемент <div> сохраняет значения стиля из последнего ключевого кадра, когда анимация заканчивается:
div {
animation-fill-mode: forwards;
}
Попробовать »
Определение и использование
Свойство animation-fill-mode задает стиль для элемента, когда анимация не воспроизводится (до, когда начинается, после того, как он заканчивается, или в обоих случаях).
CSS animations do not affect the element before the first keyframe is played
or after the last keyframe is played. The animation-fill-mode property can override this
behavior.
| Значение по умолчанию: | none |
|---|---|
| Унаследованный: | no |
| Анимируемый: | no. Прочитать о Анимируемый |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.animationFillMode="forwards" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следуют -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- |
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 Animations
HTML DOM справочник: Свойство animationFillMode
