Css3 Transition GeçiÅŸ Efektleri
Css

Css3 Transition GeçiÅŸ Efektleri

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


author

Aykut ErdoÄŸan

transition, transition delay, transition property, transition duration, transition-timing-function

  • Bu Yazılara da Gözat:

    1 Yorum

    author

    Cevapla