На 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+ |