transition-durationNormal olarak bir parçası olarak kullanılan özellik, transitionkısaltma, belirli bir geçiş süresini tanımlamak için kullanılır. Yani, hedeflenen elemanın tanımlanmış iki durum arasında geçiş yapması için geçen süre.
.example ( transition-duration: 3s; )Değer aşağıdakilerden biri olabilir:
- Geçerli bir zaman değeri (saniye veya milisaniye olarak tanımlanmış)
- Tek bir öğede birden çok özelliğin geçişini yapmak için virgülle ayrılmış zaman değerleri listesi
İçin varsayılan değer transition-durationolan 0sherhangi bir geçiş gerçekleşecek ve mülkiyet değişikliği diğer geçiş ile ilgili özellik tanımlanmamış olsa bile, hemen gerçekleşecek anlamına. Zaman değeri, daha hassas zamanlama için ondalık tabanlı bir sayı olarak ifade edilebilir ve negatif değerlere izin verilmez.
Aşağıdaki CodePen, arka plan rengini kademeli olarak değiştirmek için bir transition-durationdeğeri kullanan bir kutu üzerinde vurgulu bir efekt gösterir 1s:
Destekleyen tüm tarayıcılarda uyumluluk için, standart sözdiziminin en son bildirildiği satıcı önekleri gereklidir:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (IE'nin desteklenen ilk kararlı sürümü transition-duration) -ms-ön ek gerektirmez .
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| İşler | İşler | 4+ | 10.5+ | 10+ | 2.1+ | 3.2+ |