Css Transition Kullanımı

Bu yazımızda Css’te Transition özelliği nedir?, Nasıl kullanılır? 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.

CSS TRANSİTİON PROPERTY ÖZELLİĞİ

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.

CSS TRANSİTİON DURATİON ÖZELLİĞİ

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,

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

2 adet buton 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 butona uygulayalım ki aradaki farkı görelim.

Gördüğünüz gibi ikinci butonda 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.

CSS TRANSİTİON TİMİNG FUNCTİON ÖZELLİĞİ

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.

CSS TRANSİTİON DELAY ÖZELLİĞİ

Transition gerçekleşmesini belirtilen süre kadar geciktirebiliriz. Saniye cinsinden değer alır.

Örneğin bir buton 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 butonun ü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,

TRANSİTİON ÖZELLİĞİ TARAYICI DESTEĞİ

Özellik Chrome IE Firefox Safari Opera
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.

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

Örneğin,

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link