Az a transition-durationtulajdonság, amelyet általában a transitiongyorsírás részeként használnak, egy meghatározott átmenet időtartamának meghatározására szolgál. Vagyis, mennyi időbe telik, amíg a megcélzott elem áttér két meghatározott állapot között.
.example ( transition-duration: 3s; )Az érték a következő lehet:
- Érvényes időérték (másodpercben vagy ezredmásodpercben megadva)
- Vesszővel elválasztott időértékek listája több tulajdonság egyetlen elemre történő átállításához
A (z) alapértelmezett értéke transition-durationazt 0sjelenti, hogy nem történik átmenet, és a tulajdonságváltozás azonnal megtörténik, még akkor is, ha a többi átmenettel kapcsolatos tulajdonság meg van határozva. Az időérték tizedes alapú számként kifejezhető a pontosabb időzítés érdekében, és a negatív értékek nem megengedettek.
A következő CodePen egy lebegő hatást mutat egy olyan mezőben, amely a háttér színének fokozatos megváltoztatásához használja a transition-durationértéket 1s:
Az összes támogató böngésző kompatibilitásához szállító előtagokra van szükség, a szabványos szintaxissal utoljára deklarálva:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )Az IE10 (az IE első támogatott stabil verziója transition-duration) nem igényli az -ms-előtagot.
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Művek | Művek | 4+ | 10,5+ | 10+ | 2.1+ | 3.2+ |