css властивість animation-fill-mode

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

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

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

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 (табл.).

animation-direction	Значення
normal або alternate	0% або from
reverse або alternate-reverse	100% або to

автор: Svitlana

Порада: Рекомендується використовувати універсальну властивість animation щоб задавати всі властивості відразу в одному місці. Це робить стилі більш зрозумілішими та зменшує їхній обсяг.
автор: Svitlana
Порада: Зверніть увагу, що порядок у визначенні властивості має дуже важливий. Перший значення у формі часу, розглядається як animation-duration, а другий - як animation-delay.
автор: Svitlana

Синтаксис

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

Властивість animation-fill-mode може отримувати 6 значень:

none

До елементу не буде застосовано ніяких стилів.

автор: Svitlana

forwards

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

автор: Svitlana

backwards

До елементу застосовується стиль першого ключового кадру і він залишається на протязі періоду заданого animation-delay. Перший ключовий кадр визначається на підставі значення animation-direction

автор: Svitlana

both

До елементу застосовуються обидва правила, як для forwards, так і для backwards

автор: Svitlana

initial

Встановлює властивість у значення без задання

автор: Svitlana

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

Значення без задання:	none
Наслідує:	Ні
Анімується:	Ні
JavaScript синтаксис:	object.style.animationFillMode="forwards"