Stil geçişi Özellik
Örnek
Görünümünü kademeli olarak değiştirmek için bir div öğesinin üzerine gelin:
document.getElementById("myDIV").style.transition = "all 2s";
Tanım ve Kullanım
Geçiş özelliği, dört geçiş özelliği için bir kestirme özelliktir:
geçişÖzelliği, geçişDuration, geçişTimingFunction ve geçişGecikmesi.
Not: Her zaman geçişDuration özelliğini belirtin, aksi takdirde süre 0 olur ve geçişin hiçbir etkisi olmaz.
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Property | |||||
---|---|---|---|---|---|
transition | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransition |
12.1 |
Sözdizimi
Geçiş özelliğini döndürün:
object.style.transition
Geçiş özelliğini ayarlayın:
object.style.transition = "property duration timing-function delay|initial|inherit"
Mülk değerleri
Value | Description |
---|---|
transitionProperty | Specifies the name of the CSS property the transition effect is for |
transitionDuration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transitionTimingFunction | Specifies the speed curve of the transition effect |
transitionDelay | Defines when the transition effect will start |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Teknik detaylar
Varsayılan değer: | hepsi 0 kolaylık 0 |
---|---|
Geri dönüş değeri: | Bir elemanın geçiş özelliğini temsil eden bir String |
CSS Sürümü | CSS3 |
İlgili Sayfalar
CSS referansı: geçiş özelliği
❮ Stil Nesnesi