Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |||
10.0 + | 1.0 + | 26.0 + | 11.6 + | 12.10 + | 3.0 + | 4.0 + | 16.0 + | 2.1 | 2.0 + |
Коротка інформація
Значення за умовчанням | 0s |
---|---|
Успадковується | Ні |
Застосовується | До всіх елементів, до псевдоелементи :: before і :: after |
відсоткова запис | незастосовні |
Посилання на специфікацію | http://dev.w3.org/csswg/css-transitions/#transition-duration |
Версії CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Опис
Задає час в секундах або міллісек ндах, скільки повинна тривати анімація переходу до її завершення. За умовчанням значення дорівнює 0s, це означає, що ніякої анімації немає, перехід відбувається миттєво.
Можна вказати кілька значень, перераховуючи їх через кому. Кожне значення застосовується до властивостей, заданих через transition-property .
Синтаксис
transition-duration: <час> [, <час> ] *
Значення
Див. час .
Приклад
HTML5 CSS3 IE 10 + Cr Op Sa Fx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> transition-duration </title> <style> .warn {padding: 20px; -webkit-transition-duration: 2s; -o-transition-duration: 2s; -moz-transition-duration: 2s; transition-duration: 2s; } .Warn: hover {background: #fc0; } </style> </head> <body> <div class="warn"> Ви не врахували, що скалярний поле необхідно і досить! </div> </body> </html>
В даному прикладі при наведенні курсору на блок тексту змінюється колір фону під блоком.
Браузери
Chrome до версії 26.0, Safari, Android і iOS підтримують нестандартне властивість - webkit-transition-duration .
Opera до версії 12.10 підтримує нестандартне властивість -o-transition-duration .
Firefox до версії 16.0 підтримує нестандартне властивість - moz-transition-duration .