Свойство animationFillMode
Пример style.animationFillMode
Изменение свойства animationFillMode элемента <div>:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Попробуйте сами »
Описание animationFillMode
Свойство animationFillMode определяет, какие стили будут применяться к элементу, когда анимация не воспроизводится (когда она завершена или имеет "задержку").
По умолчанию CSS-анимации не будут влиять на анимируемый вами элемент, пока не "воспроизведен" первый ключевой кадр, а затем перестанут влиять на него после завершения последнего ключевого кадра. Свойство animationFillMode может переопределить это поведение.
Синтаксис animationFillMode
Верните свойство animationFillMode:
object.style.animationFillMode
Установите свойство animationFillMode:
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
Значение свойства animationFillMode
| Значение | Описание |
|---|---|
| НЕТ | Значение по умолчанию. Анимация не будет применять стили к цели до или после ее выполнения. |
| forwards | После окончания анимации (определяется параметром animation-iteration-count) анимация применит значения свойств для времени окончания анимации. |
| backwards | Анимация применит значения свойств, определенные в ключевом кадре, который начнет первую итерацию анимации, в течение периода, определенного animation-delay. Это либо значения ключевого кадра from (когда animation-direction имеет значение "normal" или "alternate"), либо значения keyframe (когда animationDirection имеет значение "reverse" или "alternate-reverse"). |
| both | Анимация будет следовать правилам как для прямого, так и для обратного движения. То есть, она будет расширять свойства анимации в обоих направлениях. |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о initial |
| inherit | Наследует это свойство от родительского элемента. Читайте о inherit |
Технические детали animationFillMode
| Значение по умолчанию: | none |
|---|---|
| Возвращаемое значение: | Строка, представляющая свойство animation-fill-mode элемента. |
| CSS Версия | CSS3 |
Поддержка animationFillMode
style.animationFillMode функция CSS3 (1999).
Он полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 11 |
Связанные страницы animationFillMode
CSS Справочник: Свойство animation-fill-mode