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;

CSS transition özelliği değerleri

CSS transition değerleri	CSS transition değerleri tanımları
transition-property	Geçiş efekti için CSS özelliği adını belirtir
transition-duration	Geçiş efekti tamamlamak için gereken kaç saniye veya milisaniye belirler
transition-timing-function	Geçiş etkisinin hız eğrisini belirler
transition-delay	Geçiş efekti ne zaman başlayacağı tanımlar,yani gecikme süresidir.
initial	Özelliğin varsayılan değerdir.
inherit	Kalıtsal olarak aldığı değerdir.