yandex
image
3 sene önce eklendi.

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

 Ö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ş tipidir.
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 ekleride aşağıdaki gibi olmalıdır.

Bu yazımız bu kadar transition ile ilgili buradaki örneğe bakabilirsiniz.

Tüm Yorumlar ;