css.in.ua
Підтримати

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
Порада:

Рекомендується використовувати універсальну властивість animation щоб задавати всі властивості відразу в одному місці. Це робить стилі більш зрозумілішими та зменшує їхній обсяг.
Порада:

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

Синтаксис

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

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

none

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

forwards

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

backwards

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

both

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

initial

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

inherit

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

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

Переглядачі

Переглядач
animation-fill-mode

43.0
3.0 -webkit-

10.0

16.0
5.0 -moz-

9.0
4.0 -webkit-

12.10
12.0 -o-

12.0
Переглядач
animation-fill-mode

2.0 -webkit-

16.0
5.0 -moz-

9.2
4.0 -webkit-

Мобільних переглядачів ще не додано.

Приклади


Демонстрація різних значень у дії

Простий приклад дії властивості

Анімація руху з одного місця в інше

div { 


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


  animation-fill-mode: forwards; 


}

Додаткові посилання

Спільнота

Зв'язок