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