CSS3 geçiş efektleri (Transitions) nasıl kullanılır?

CSS ile anlık geçişleri zaten bünyesinde bulunuyordu. Birçok uygulamada bir bağlantının üzerine geldiğinde bağlantının rengi değiştiriyor, düğmemizin arkaplan rengini değiştirebiliyorduk.

CSS3 ile birlikte ani geçişlere artı olarak yeni efektli geçişler eklenip, geçişler yavaş yavaş olduğu gibi uzun uzun geçişlerde bulunmaktadır.

Transtion Özellikleri

Geçiş efektlerini uygulamak için aşağıdaki özelliklerden yararlanılmaktadır.

• transition-property
• transition-duration
• transition-delay
• transition-timing-function
• transition

Bu özellikleri tek tek inceleyelim.

transition-property (Geçiş Efekti Hangi Özellik İle Yapılacağını Belirleme)

Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını belirlemek için transition-property özelliğini kullanılır.

Örneğin background değeri geçiş uygulanacak elemanın başlangıç ve son rengi arasında bir geçiş olacağını gösterir.

a{
    color:blue;
    transition-property: background;
}
a:hover {
    color:green;
}

transition-duration (Geçiş Efekti Uzunluğunu Belirleme)

Geçiş efektlerini uygularken verdiğimiz efektin ne kadar süre ile devam edeceğini ayarlayabildiğimiz özelliktir. Bu ayarlamayı transition-duration özelliği yapıyoruz.

0 değeri geçişin hemen olacağı anlamına gelir. Eksi değerler 0 olarak yorumlanır.

a{
    color:blue;
    transition-property: background;
    transition-duration:0.6s;
}
a:hover {
    color:green;
}

transition-delay

Uygulanan geçiş efektinin ne kadar zaman sonra başlayacağını belirlemek için kullanılır. Belirlenen zamana kadar animasyonu durdurur ve sonra animasyon başlar.

a{
    color:blue;
    transition-property: background;
    transition-duration:0.6s;
    transition-delay: 0.6s;
}
a:hover {
    color:green;
}

transition-timing-function

Oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan fonksiyonlardır. CSS3 ile birlikte gelen transition efekti başlangıç tanımı doğrusal bir geçiştir. Biz bu özelliğe ease, ease-in, ease-out, ease-in-out ve cubic-bezier değerlerini tanımlayabiliyoruz. cubic-bezier tanımı ise geçişleri kendimize göre tanımlama imkanı veriyor. Kendi zaman çizgimizi hazırlamak (cubic-bezier) için internet üzerindeki bazı araçlar ile yapabiliriz.

• http://matthewlein.com/ceaser/

ile transition-timing-function özelliğini kullanarak kendimize özgü efektler yapabilirsiniz.

input{
    width:100px;
    transition-property:width;
    transition-duration:0.7s;
    transition-delay:0.7s;
    transition-timing-function:ease-in-out;
}
input:focus {
    width:250px;
}

transition kısayolu

Yukarıda tek tek ayrı ayrı her özelliği tanımlayabildiğimiz gibi tek bir tanımlama ile bunları kısa bir şekilde tanımlayabiliriz.

transition-property: width;
transition-duration:0.7s;
transition-delay: 0.7s;
transition-timing-function:ease-in-out;

Yukarıdaki son örnekte geçiş tanımlarımız 4 adet idi. Biz burada bunları tek bir tanımda kullacak olursak;

transition: width 0.7s ease-in-out 0.7s;

Görüldüğü gibi kodumuz daha kısa bir hal aldı. bundan sonra bu şekilde kullanmayı tercih ederbilirsiniz.

Çoklu Geçiş Kullanımı

Yukarıda yaptığımız gibi tek bir özellik üzerinden geçiş efekti uygulayabildiğimiz gibi virgül ile ayırmak kaydı ile birden fazla geçiş efekti de uygulanabilmektedir.

input{
   background-color:#0000ff;
   width:100px;
   transition: width .7s ease-in-out, background .7s ease;
}
input:focus {
   width:300px;
   background-color:#ff0000;
}

Tarayıcı Uyumluluğu

Farklı tarayıcılar için ön ek kullanılarak çözebiliriz.

-moz Firefox için,

-webkit Safari ve Google Chrome için,

-o Opera için,

- transition İE10 destelemektedir. En önemli dezavantajı IE9 ve altı sürümler için desteği bulunmamaktadır.

input{
      
       background-color:#0000ff;     
       width:150px;
       -moz-transition:width .6s ease-in-out, background .4s ease;
       -webkit-transition:width .6s ease-in-out, background .4s ease;
       -o-transition:width .6s ease-in-out, background .4s ease;
       transition:width .6s ease-in-out, background .4s ease;
}

input:focus {
       width:300px;
       background-color:#ff0000;
}