css властивість animation-direction


Властивість animation-direction визначає напрямок анімації: анімація може демонструватися тільки в одному напрямку або в обох, чергуючи назад і вперед.

Ви можете прописати, чи буде анімація показуватися в зворотньому порядку у деяких або всіх циклах. Під час демонстрації анімації у зворотньому порядку, animation-timing-function теж приймається до уваги. Наприклад, коли анімація демонструється у зворотньому напрямку, animation-timing-function із встановленого вами значення ease-out змінюється автоматично на ease-in.

Порада:

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

Порада:

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

Синтаксис

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

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

normal

Анімація йде з самого початку, після завершення циклу повертається до вихідного стану

reverse

Анімація йде з кінця до початку, потім плавно повертається у вихідне положення

alternate

Анімація йде циклічно з початку до кінця, а потім з кінця до початку.

alternate-reverse

Анімація йде циклічно з кінця до початку, а потім з початку до кінця.

initial

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

inherit

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

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

Переглядачі

Переглядач
normal, alternate

10.0

43.0
3.0 -webkit-

12.10
12.0 -o-

4.0 -webkit-

16.0
5.0 -moz-

12.0

reverse, alternate-reverse

10.0

12.0

43.0
19.0 -webkit-

19.0

9.0

16.0

Переглядач
normal, alternate

2.0 -webkit-

16.0
5.0 -moz-

4.0 -webkit-

reverse, alternate-reverse

Не підтримується

16.0

9.2


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

Приклади


Динамічний приклад

Демонстрація дії властивості з різними значеннями

Приклад роботи властивості

Встановлює анімацію в одному і в зворотньому напрямку

div {


   -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */ 


  animation-direction: alternate; 


}

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