css властивість animation-direction
Властивість animation-direction визначає напрямок анімації: анімація може демонструватися тільки в одному напрямку або в обох, чергуючи назад і вперед.
Ви можете прописати, чи буде анімація показуватися в зворотньому порядку у деяких або всіх циклах. Під час демонстрації анімації у зворотньому порядку, animation-timing-function теж приймається до уваги. Наприклад, коли анімація демонструється у зворотньому напрямку, animation-timing-function із встановленого вами значення ease-out змінюється автоматично на ease-in.
| Порада: | Рекомендується використовувати універсальну властивість |
| Порада: | Зверніть увагу, що порядок у визначенні властивості має дуже важливий. Перше значення у формі часу, розглядається як |
Синтаксис
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 |
12.10 |
4.0 -webkit- |
16.0 |
12.0 |
| reverse, alternate-reverse | 10.0 |
12.0 |
43.0 |
19.0 |
9.0 |
16.0 |
| Переглядач | |||
|---|---|---|---|
| normal, alternate | 2.0 -webkit- |
16.0 |
4.0 -webkit- |
| reverse, alternate-reverse | Не підтримується |
16.0 |
9.2 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація дії властивості з різними значеннями
Приклад роботи властивості
Встановлює анімацію в одному і в зворотньому напрямку
div {
-webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
animation-direction: alternate;
}