css властивість animation-direction
Властивість animation-direction визначає напрямок анімації: анімація може демонструватися тільки в одному напрямку або в обох, чергуючи назад і вперед.
Ви можете прописати, чи буде анімація показуватися в зворотньому порядку у деяких або всіх циклах. Під час демонстрації анімації у зворотньому порядку, animation-timing-function теж приймається до уваги. Наприклад, коли анімація демонструється у зворотньому напрямку, animation-timing-function із встановленого вами значення ease-out змінюється автоматично на ease-in.
- Порада
-
Рекомендується використовувати універсальну властивість
автор: Svitlanaanimation, щоб задавати всі властивості відразу в одному місці. Це робить стилі більш зрозумілішими та зменшує їхній обсяг. - Порада
-
Зверніть увагу, що порядок у визначенні властивості має дуже важливий. Перше значення у формі часу, розглядається як
автор: Svitlanaanimation-duration, а друге - якanimation-delay.
Синтаксис
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;Властивість animation-direction може отримувати 6 значень:
-
normal -
Анімація йде з самого початку, після завершення циклу повертається до вихідного стану
автор: Svitlana -
reverse -
Анімація йде з кінця до початку, потім плавно повертається у вихідне положення
автор: Svitlana -
alternate -
Анімація йде циклічно з початку до кінця, а потім з кінця до початку.
автор: Svitlana -
alternate-reverse -
Анімація йде циклічно з кінця до початку, а потім з початку до кінця.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивостей від свого батьківського елемента
автор: Svitlana
| Значення без задання: | normal |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.animationDirection="reverse" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 43 | 16 | 9 | 30 | 12 | 10 | |
| normal, alternate | 43.0 <br>3.0 -webkit- | 16.0 <br>5.0 -moz- | 4.0 -webkit- | 12.10 <br>12.0 -o- | 12.0 | 10.0 |
| reverse, alternate-reverse | 43.0 <br>19.0 -webkit- | 16.0 | 9.0 | 19.0 | 12.0 | 10.0 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 43 | 43 | 16 | 9 | |
| normal, alternate | 2.0 -webkit- | 16.0 <br>5.0 -moz- | 4.0 -webkit- | |
| reverse, alternate-reverse | Не підтримується | 16.0 | 9.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Встановлює анімацію в одному і в зворотньому напрямку
Демонстрація дії властивості з різними значеннями
Динамічний приклад
Приклад роботи властивості
Коментарі
Коментарів ще немає — будьте першим!