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...