Свойство CSS animation-fill-mode
Пример
Пусть элемент <div> сохранит значения стиля из последнего ключевого кадра, когда анимация закончится:
div {
animation-fill-mode: forwards;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство animation-fill-mode
указывает стиль для элемента, когда анимация не воспроизводится (до ее начала, после ее окончания или в обоих случаях).
CSS-анимация не влияет на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра. Свойство animation-fill-mode
может переопределить это поведение.
Значение по умолчанию: | никто |
---|---|
Унаследовано: | нет |
Анимация: | нет. Читать об анимации |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.animationFillMode="вперед" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.
Property | |||||
---|---|---|---|---|---|
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;
Значения свойств
Value | Description |
---|---|
none | Default value. Animation will not apply any styles to the element before or after it is executing |
forwards | The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) |
backwards | The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period |
both | The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Пусть элемент <div> получит значения стиля, установленные первым ключевым кадром, до начала анимации (в течение периода задержки анимации):
div {
animation-fill-mode: backwards;
}
Пример
Пусть элемент <div> получит значения стиля, установленные первым ключевым кадром до начала анимации, и сохранит значения стиля из последнего ключевого кадра, когда анимация закончится:
div {
animation-fill-mode: both;
}
Связанные страницы
Учебное пособие по CSS: CSS-анимации
Справочник по HTML DOM: свойство animationFillMode