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-direction	animation-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 або alternate	0% або from
reverse або alternate-reverse	100% або 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