animation-fill-mode

Оновлено: 05.12.2022

animation-fill-mode

Визначає, які стилі мають застосовуватися до елемента, коли анімація не програється. Наприклад, після її завершення або під час зупинки. За замовчуванням, у момент закінчення анімації стиль елемента повертається до початкового, властивість animation-fill-mode дає змогу змінити цю поведінку і зробити так, щоб стиль елемента залишався як в останнього ключового кадру.

Наприклад, якщо ви робите повідомлення, що виїжджає з-за краю вікна браузера, то після закінчення анімації повідомлення повернеться назад за край екрана. Значення forwards властивості animation-fill-mode змінює цю поведінку і залишає стилі на момент завершення руху. Таким чином, повідомлення плавно висунеться з-за краю вікна і залишиться на місці.

Коротка інформація

Значення за замовчуванням none
Успадковується Ні
Застосовується До всіх елементів, до псевдоелементів ::before і ::after
Анімується Ні

Синтаксис

animation-fill-mode: none | forwards | backwards | both

Значення

none До елемента не застосовуються жодні стилі.
forwards До елемента після закінчення анімації застосовується стиль останнього ключового кадру. Яким буде цей кадр у послідовності анімації залежить від комбінації значень властивостей animation-direction і animation-iteration-count (табл. 1).

Табл. 1. Последний ключевой кадр

animation-directionanimation-iteration-countЗначение
normalбудь-яке число100% або to
reverseбудь-яке число0% або from
alternateпарне число0% або from
alternateнепарне число100% або to
alternate-reverseпарне число100% або to
alternate-reverseнепарне число0% або from
backwards До елемента застосовується стиль першого ключового кадру і він залишається протягом періоду заданого animation-delay. Перший ключовий кадр визначається на підставі значення animation-direction (табл. 2).

Табл. 2. Перший ключовий кадр

animation-directionЗначення
normal або alternate0% або from
reverse або alternate-reverse100% або to
both До елемента застосовуються обидва правила, як для forwards, так і для backwards.

Приклад

У цьому прикладі показано, що зображення очікує одну секунду, потім починає обертатися і рухатися вправо. По закінченню анімації колесо залишається в крайньому правому положенні.

Об'єктна модель

Об'єкт.style.animationFillMode

Примітка

Chrome, Safari, Android підтримують властивість -webkit-animation-fill-mode.

Opera до версії 12.10 підтримують властивість -o-animation-fill-mode.

Firefox до версії 16 підтримують властивість -moz-animation-fill-mode.

Браузери

animation-fill-mode

Переглянути сумісність з Can I use?

animation-fill-mode