Css Transition Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te transition özelliği nedir, nasıl kullanabiliriz onu öğreneceğiz.Transition özelliği ile bir html etiketinin bir özelliğinin değerini değiştirdiğimizde, bunun ani bir biçimde değil de değişimin zamana yayılarak daha görsel bir şekilde gerçekleşmesini sağlayabiliriz.Bu özellik, aslında 4 özelliğin daha kısa yoldan yazılması için kullanılan bir özelliktir.Önce 4 özelliği ayrı ayrı öğrenip daha sonrasında kısa biçimde yazılmasına bakalım.

1 – transition-property : Html etiketinin hangi özelliğine uygulanmasını istiyorsak onu belirtiyoruz.Örneğin etiketin genişlik değeri değişecek ve buna transition uygulanmasını istiyorsak şu şekilde yazıyoruz.

Birden fazla özelliği değişiyorsa, aralarına virgül koyarak yazıyoruz.Örneğin,

Eğer transition’ın değişen tüm özelliklere uygulanmasını istiyorsak, all değerini veriyoruz.

2 – transition-duration: Transition’ın kaç saniyede gerçekleşmesini istiyorsak onu yazıyoruz.Saniye cinsinden değer alır.Örneğin 3 saniyede gerçekleşmesi için şu şekilde yazıyoruz.

Bu 2 özelliği kısa yoldan da yazmamız mümkün.Örneğin,

Dikkat : Süre belirtilmezse, varsayılan değer 0 olduğundan transition özelliği uygulanmaz.

2 adet <button> tanımlayalım ve genişlik değerine 125px verelim.Butonların üzerine geldiğimizde genişlik değerini 200px yapalım.Transition özelliğini sadece ikinci buton’a uygulayalım ki aradaki farkı görelim.

Gördüğünüz gibi ikinci buton’da geçiş bir anda değilde, 2 saniye içerisinde gerçekleşti.Birde birden fazla özelliğe transition uygulayalım.Genişlik ile beraber arkaplan renginide değiştirelim.

3 – transition-timing-function : Transition gerçekleşirken bunu farkı şekillerde yapabiliyoruz.Örneğin 5 saniyede gerçekleşeceğini düşünelim.Gerçekleşecek değişim, hızlı bir şekilde başlayıp sonlara doğru yavaşlayabilir.Yavaş bir şekilde başlayıp sonlara doğru hızlanabilir veya sabit bir hızda gerçekleşebilir.İşte bu gibi seçenekleri belirlemek için transition-timing-function özelliğini kullanıyoruz.Değer olarak şunları alabilir:

      ► ease : Geçiş, yavaş başlar sonra hızlanır en son tekrar yavaşlar. (Varsayılan değerdir.)

      ► linear : Geçiş, baştan sona aynı hızda devam eder.

      ► ease-in : Geçişin yavaş başlamasını sağlar.

      ► ease-out : Geçişin yavaş bitmesini sağlar.

      ► ease-in-out : Geçiş, yavaş başlar ve yavaş biter.

      ► cublic-bezier : Manuel olarak ayarladığımız geçiş tipidir.0 ile 1 arasında değerler alabilir.

Bunları uygulama üzerinde incelediğinizde daha anlaşılır olacaktır.5 adet <div> tanımlayalım ve fare ile üzerine geldiğimizde genişlik değerini 80px’den 300px’e çıkaralım.Geçişin gerçekleşmesini 3 saniye sürecek şekilde ayarlayalım ve her div’e farklı bir transition-timing-function değeri verelim.

4 – transition-delay: Transition gerçekleşmesini belirtilen süre kadar geciktirebiliriz.Saniye cinsinden değer alır.Örneğin bir <button> tanımlayalım ve üzerine geldiğimizde arkaplan rengini 2 saniye sürecek şekilde değiştirelim.transition delay özelliği ile bu geçişin 2 saniye geç başlamasını sağlayalım.Kullanımı şu şekilde,

Gördüğünüz gibi buton’un üzerine geldikten 2 saniye sonra transition gerçekleşti.

Öğrendiğimiz bu 4 özelliği, transition özelliği ile birlikte kullanabiliriz.Kullanımı şu şekilde,

Tarayıcı Desteği

ÖzellikChromeIEFirefoxSafariOpera
transition

26.0

4.0 -webkit-

10.0

16.0

4.0 -moz-

6.1

3.1 -webkit-

12.1

10.5 -o-

transition-delay

26.0

4.0 -webkit-

10.0

16.0

4.0 -moz-

6.1

3.1 -webkit-

12.1

10.5 -o-

transition-duration

26.0

4.0 -webkit-

10.0

16.0

4.0 -moz-

6.1

3.1 -webkit-

12.1

10.5 -o-

transition-property

26.0

4.0 -webkit-

10.0

16.0

4.0 -moz-

6.1

3.1 -webkit-

12.1

10.5 -o-

transition-timing-function

26.0

4.0 -webkit-

10.0

16.0

4.0 -moz-

6.1

3.1 -webkit-

12.1

10.5 -o-

Bu resimde tarayıcıların transition özelliğini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını ve özelliklerin ön ekler ile birlikte kullanıldığında, hangi versiyondan itibaren sorunsuz çalıştığını görebilirsiniz.

Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Dikkat : Bu özellikleri eski tarayıcılarda da sorunsuz bir şekilde kullanmak istiyorsanız, ön eklerle birlikte kullanmalısınız.Örneğin,

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 23 – Box Shadow Kullanımı

Sonraki : Css Dersleri 25 – Transform Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +