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.