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 {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.
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;
}
a {Sonraki makalelerde görüşmek üzere...
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;
}
1 Yorum
Osman Ertuğrul
Güzel bir bilgi teşekkürler.