CSS3 transition

CSS ile geçiş efektleri uygulamak için kullanılan parametredir.

4 geçiş özelliğinin kısa yazımıdır transition. Bunlar transition-property, transition-duration, transition-timing-function, ve transition-delay.

  Yazım:

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

 

Özellikler:

Value Description
transition-property Specifies the name of the CSS property the transition effect is for
transition-duration Specifies how many seconds or milliseconds the transition effect takes to complete
transition-timing-function Specifies the speed curve of the transition effect
transition-delay Defines when the transition effect will start
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

 

Örnek

div {
    width: 100px;
    -webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
}

 

Kaynak

 

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...