transition-durationВластивість, як правило , використовується в якості частини transitionстенографії, використовується для визначення тривалості заданого переходу. Тобто тривалість часу, необхідного для переходу цільового елемента між двома визначеними станами.
.example ( transition-duration: 3s; )Значення може бути одним із наступних:
- Дійсне значення часу (визначається в секундах або мілісекундах)
- Список часових значень, розділених комами, для переходу кількох властивостей в одному елементі
Значення за замовчуванням transition-durationє 0s, що означає , що ніякої перехід не відбудеться і зміна власності відбувається негайно, навіть якщо інші властивості перехідних пов'язаним визначені. Значення часу може бути виражене як десяткове число для більш точного часу, і негативні значення не допускаються.
Наступний CodePen показує ефект наведення на поле, яке використовує transition-durationзначення 1sдля поступової зміни кольору фону:
Для сумісності у всіх підтримуваних браузерах потрібні префікси постачальників зі стандартним синтаксисом, оголошеним останнім:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (перша стабільна версія IE для підтримки transition-duration) не вимагає -ms-префікса.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Працює | Працює | 4+ | 10,5+ | 10+ | 2.1+ | 3,2+ |