CSS transition Özelliği

CSS transition

Css transition özelliği ile bir animasyonun veya bir css etkisinin gerçekleşme süresi ,gecikme süresi ne kadar süreceği düzenlenebilir.

Örnek:

Bu örnekte bir div elemanının genişliği 90px'ten 360px olması 3 saniyede gerçekleşmiştir.

div { width: 90px; height: 90px; color: white; background: crimson; transition: width 3s; -webkit-transition: width 3s; /* Safari 3.1 to 6.0 */ } div:hover { width: 360px; }

CSS transition nedir nasıl kullanılır

Css transition özelliği ile html elemanlarına uygulanacak olan css etkilerinin geçiş süresi tanımlanabilir.

CSS transition	CSS transition özellikleri
Varsayılan Değer:	all 0s ease 0s
Kalıtsallık:	yok
Animasyon Özelliği:	yok
Versiyon:	CSS3
JavaScript transition:	object.style.transition="all 5s"

CSS transition Tarayıcı Desteği

Aşağıdaki tablodaki sayılar özelliği destekleyen ilk tarayıcı versiyonlarını göstermektedir.

CSS Kodu:
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

CSS transition Değerleri

transition:property duration timing-function delay|initial|inherit;