Merhaba arkadaşlar. Bu makalemizde css geçiş efektlerini konu alacağız. Css ile anlık geçişler(renk değişimi vs.) yapabiliyorduk. Fakat bu geçişler anlık, hızlı geçişlerdi. Artık css ile javascript'e ihtiyaç duymadan ağır-yavaş renk geçişleri yapabiliyoruz. Bunu nasıl yapacağız diye soracak olursanız tabiki transition ile. Transition css3 ile kullanılmaya başlanmıştır.
Transition-property : Efektin elemanın hangi özelliği üzerinden yapılacağını belirler.
Transition-duration : Verilen efektin ne kadar süre devam edeceğini belirler.
Transition-delay : Efektin ne kadar zaman sonra başlayacağını belirler.
Transition-timing-function : Geçişleri daha estetik hale getirmek için kullanılır. Ease, ease-out, ease-in, cubic-bezier ve ease-in-out gibi değerler tanımlanır.
Kullanım örnekleri aşağıdaki gibidir;

a {

   background-color:#333333;

   transition-delay: 0.7s;

   transition-property: background-color;

   transition-duration:0.7s;

   transition-timing-function:ease-in-out;

   }

a:hover {

   background-color:#ff0000;

   transition-delay: 0.7s;

   transition-property: background-color;

   transition-duration:0.7s;

   transition-timing-function:ease-in-out;

   }

Tüm bunları yazmakla uğraşmak istemezseniz aşağıdaki gibi tek satırlık transition kodu ile yukarıdaki işlemin aynısını gerçekleştirebilirsiniz.

a {

   background-color:#333333;

   transition: background-color 0.7s ease-in-out 0.7s;

}

a:hover {

   background-color:#ff0000;

   transition: background-color 0.7s ease-in-out 0.7s;

}

Sonraki makalelerde görüşmek üzere...