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.

Yorumlar

Popüler yayınlar

HTML Metin Biçimlendirme Etiketleri

HTML em Etiketi

CSS justify-content Özelliği

HTML hr Etiketi

HTML table Etiketi

CSS align-items özelliği

CSS flex-basis Özelliği

HTML menu Etiketi

HTML embed Etiketi

CSS content Özelliği