transition
Оновлено: 15.12.2022
transition
Універсальна властивість, яка дає змогу одночасно задати значення transition-property, transition-duration, transition-timing-function і transition-delay. Встановлює ефект переходу між двома станами елемента, вони можуть бути визначені за допомогою псевдокласу :hover або :active, а також динамічно через JavaScript
Коротка інформація
| Значення за замовчуванням | all 0s ease 0s |
| Успадковується | Ні |
| Застосовується | До всіх елементів, до псевдоелементів ::before та ::after |
| Анімується | Ні |
Синтаксис
transition: <перехід> [, <перехід> ]*Тут:
<перехід> = [ none | <transition-property> ] || <transition-duration> ||
<transition-timing-function> || <transition-delay>Значення
| none | Скасовує ефект переходу. |
Приклад
У цьому прикладі при наведенні курсору на стрілку розкривається блок із числами.
Об'єктна модель
Об'єкт.style.transition
Примітка
Chrome до версії 26, Safari до версії 6.1 і Android до версії 4.4 підтримують властивість -webkit-transition.
Opera до версії 12.10 підтримує властивість -o-transition.
Firefox до версії 16 підтримує властивість -moz-transition.