CSS3 animation-fill-mode Свойство

Справочник CSS


Пример

Переместите объект с помощью анимации из одного места в другое и оставьте его там:

animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; /*Safari и Chrome*/

Попробуйте сами »

Поддержка браузеров

Цифры в таблице указывают первую версию браузера, поддерживающую это свойство.

Число, непосредственно предшествующее -webkit-, -ms- или -moz-, — это первая версия браузера, которая поддерживает свойство с префиксом.

Свойство
animation-fill-mode 4.0 -webkit- 10.0 16.0
5.0 -moz-		 4.0 -webkit- 15.0 -webkit-
12.1
12.0 -o-

Определение и использование

Свойство animation-fill-mode указывает стиль, применяемый к элементу, когда анимация не воспроизводится (когда она завершилась или когда у неё есть задержка и она ещё не начала воспроизводиться).

По умолчанию CSS-анимация не влияет на элемент до воспроизведения первого ключевого кадра и перестаёт влиять на элемент после завершения последнего ключевого кадра. Свойство animation-fill-mode может переопределить это поведение.

Значение по умолчанию: none
Наследуется: нет
Анимируемый: Нет. См.Анимируемый (animatable)。
версия: CSS3
Синтаксис JavaScript: object.style.animationFillMode="forwards" Попробуйте сами

Синтаксис CSS

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

Значение свойства

Значение Описание
none Значение по умолчанию. Анимация не будет применять какие-либо стили к целевому элементу до или после её выполнения.
forwards После завершения анимации (как определено animation-iteration-count) анимация применит значения свойств.
backwards Анимация будет применять значения свойств, определённые в ключевых кадрах, которые начинают первую итерацию анимации, в течение периода, определённого animation-delay. Это значения из ключевого кадра `from` (когда `animation-direction` имеет значение "normal" или "alternate") или значения из ключевого кадра `to` (когда `animation-direction` имеет значение "reverse" или "alternate-reverse").
both Анимация следует правилам как для forwards, так и для backwards. То есть анимация будет продлевать свойства анимации в обоих направлениях.
initial Устанавливает для этого свойства значение по умолчанию. См.initial。
inherit Наследует это свойство от родительского элемента. См.inherit。

Связанные статьи

Руководство по CSS3:CSS3-анимации


Справочник CSS

Другие расширения