CSS transition özelliği

Tanım ve kullanım

transition özelliği, dört geçiş özelliğini ayarlamak için kullanılan kısayol bir özelliktir:

Açıklama:Her zaman ayarlamak transition-duration Aksi takdirde süresi 0 olursa, geçiş etkisi oluşturulmaz.

Ayrıca bakınız:

CSS eğitimi:CSS geçiş

HTML DOM referans el kitabı:transition özelliği

Örnek

Fare işaretçisini div elementine götürün, genişliği 100px'den 300px'ye yavaşça artar:

div {
  width: 100px;
  transition: width 2s;
}

Kişisel olarak deneyin

CSS dilbilgisi

transition: özellik süre zamanlama fonksiyonu gecikme;

Özellik değeri

Değer Açıklama
transition-property Geçiş etkisini ayarlayan CSS özelliğinin adını belirtir.
transition-duration Geçiş etkisini tamamlamak için ne kadar saniye veya milisaniye gerektiğini belirtir.
transition-timing-function Hız etkisinin hız eğrisini belirtir.
transition-delay Geçiş etkisinin ne zaman başlayacağını tanımlar.

Teknik ayrıntılar

Varsayılan değer: all 0 ease 0
Devralabilirlik: hayır
Sürüm: CSS3
JavaScript dilbilgisi: object.style.transition="width 2s"

Tarayıcı desteği

Tablo, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü belirtir.

Sayısal değerler -webkit-、-moz- veya -o- önekleri ile başlayan kullanımı gösterir.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-