CSS3 Transitions belirli bir süre boyunca bir durumdan diğerine dönüşüm işlemleri için kullanılan bir özelliktir. Bilindiği gibi Css ile bu işlemleri anlık olarak yapabiliyorduk.Bir link yapısını ele alacak olursak “a” tagının rengini turuncu olarak ayarladığımızı düşünelim hover hali için de siyah olsun, bu yapıda linkin üzerine gelindiğinde turuncudan, siyaha olan geçiş direk (anlık) olacaktır.Eğer ki belli bir zaman aralığı koyarak daha yumuşak bir geçiş elde etmek isteseydik kullanacak olduğumuz yapı CSS3 Transitions olacaktı. Şimdi bu yapıyı ve özelliklerini inceleyelim.

Öncelikli olarak özelliklerine ve tarayıcı desteklerine kısaca bir göz atalım.



Kullanım Yöntemleri
.example{
transition-delay:1s; /* Gecikme süresi 0.5s olarak ta zamanı kısalta biliriz*/

transition-duration:2s; /* Geçiş için geçerli olan süre */

transition-property:color; /* width,opcatiy,background-color,all vb */

transition-function:ease; /* Geçiş efekti linear,ease,ease-in,ease-out, esae-in-out */
}

/*Ya da*/

.example_two{
transtion:[transition-delay] [transition-duration] [transition-property] [transition-timing-function];
}



Tarayıcı Farklılıkları için


.exapmle{
-webkit-transition: color 0.5s ease-in 1s;
-moz-transition: color 0.5s ease-in 1s;
-o-transition: color 0.5s ease-in 1s;
transition: color 0.5s ease-in 1s;
}

/* Ya da*/

.example{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}


KAYNAK: http://minimalcoding.net/blog/css3-gecis-efektleri-css3-transitions/