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 birdiv
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
Csstransition
ö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. |
Yorumlar
Yorum Gönderme