Merhaba Arkadaşlar bu yazımda CSS3`ün özelliklerinden olan Geçiş efektlerini anlatacağım.Transition kısaca bir örnekle söylemek gerekirse bir buton düşünün buton siyah renk olsun üzerine gelince sarı renk olsun bu işlemi anlık yerine biraz daha ve yavaş olması için transition kullanabiliriz.Aşağıda yaptığım örneğide inceleyebilirsiniz.
See the Pen Transition Example by Doğukan (@Batal) on CodePen.
Yukarıda gördüğünüz gibi buton`un üzerine gelince 0.5 saniyede sarı renge dönüşüyor.
Kullanımı
Aşağıdaki şekilde kullanabilirsiniz bu kullanım genişletişmiş kullanımdır.
transition-property: background; /* Özellik - arkaplan rengi */ transition-duration: 0.8s; /* Süre - 0.8 saniye */ transition-timing-function: ease; /* Tip - ease */ transition-delay: 1s; /* Gecikme Süresi - 1 saniye */
Özellik : Efekti uygulayacağımız elemanı seçelim ben burada arkaplanı seçtim tümünü seçmek için all komutunu kullanabilirsiniz.
Tip : Bazı geçiş tipleri
linear : Başlangıç ve Bitiş hızı aynı olan geçiş tipi`dir.
ease : Animasyonun yavaş başlayıp hızlanması ve yavaş bitmesi ile sonuçlanan animasyon tipidir.
ease-in :Animasyonun yavaş başlamasını sağlayan geçiş tipi.
ease-out : Animasyonun yavaş bitmesini sağlayan geçiş tipi.
cubic-bezier : Manuel olarak ayarladığımız geçiş tipidir.0 ve 1 arasında değerler alabilir.
Gecikme : Animasyonun ne kadar süre sonra başlayacağını belirler.
Çoklu Kullanım
Çoklu kullanım ile birden fazla elemana bir den fazla efekt uygulayabilirsiniz.Ayrıca tarayıcı ön ekleri`de aşağıdaki gibi olmalıdır.
transition:
color 3s ease,
background 3s linear;
border-radius 2s ease-out,
-webkit-transition:
color 3s ease,
background 3s linear;
border-radius 2s ease-out,
-moz-transition:
color 3s ease,
background 3s linear;
border-radius 2s ease-out,
-o-transition:
color 3s ease,
background 3s linear;
border-radius 2s ease-out,
}
Bu yazımız bu kadar transition ile ilgili buradaki örneğe bakabilirsiniz.