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.
|
1 2 3 |
transition-property : width; |
Birden fazla özelliği değişiyorsa, aralarına virgül koyarak yazıyoruz.
Örneğin,
|
1 2 3 |
transition-property : width, height, margin; |
Eğer transition’ın değişen tüm özelliklere uygulanmasını istiyorsak, all değerini veriyoruz.
|
1 2 3 |
transition-property : all; |
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.
|
1 2 3 |
transition-duration:3s; |
Bu 2 özelliği kısa yoldan da yazmamız mümkün.
Örneğin,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* Uzun yol */ transition-property : padding; transition-duration : 2s; /* Kısa yol */ transition : padding 2s; /* Birden fazla özelliğe uygulanacaksa */ /* Uzun yol */ transition-property : padding, width, height; transition-duration : 2s; /* Kısa yol */ transition : padding 2s, width 2s, height 2s; |
Ö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,
|
1 2 3 |
transition-delay:2s; |
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,
|
1 2 3 4 5 6 7 8 9 10 11 12 |
transition : transition-property transition-duration transition-timing-function transition-delay; /* Uzun hali */ transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; /* Kısa hali */ transition: width 2s linear 1s; |
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,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/* Ön ekler ile birlikte kullanımları */ -moz-transition-property: width; -o-transition-property: width; -webkit-transition-property: width; transition-property: width; -moz-transition-duration: 2s; -o-transition-duration: 2s; -webkit-transition-duration: 2s; transition-duration: 2s; -moz-transition-timing-function: linear; -o-transition-timing-function: linear; -webkit-transition-timing-function: linear; transition-timing-function: linear; -moz-transition-delay: 3s; -o-transition-delay: 3s; -webkit-transition-delay: 3s; transition-delay: 3s; -moz-transition: width 2s linear 1s; -o-transition: width 2s linear 1s; -webkit-transition: width 2s linear 1s; transition: width 2s linear 1s; |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
