Genel Tanım
CSS anlık geçişleri bünyesinde barındırıyordu. Birçok uygulamamızda bir
bağlantının üzerine geldiğinde bağlantının rengi değiştiriyor,
düğmemizin ardalan rengini değiştiriyorduk.
CSS3 ile birlikte ani geçişlere artı olarak yeni merhale merhale
geçişler eklenmiştir. Geçişler yavaş yavaş olduğu gibi uzun uzadıya
geçişlerde mevcuttur. Durumu daha iyi anlayabilmek için yukarıda
bahsettiğimiz gibi bir fare imlecinin bağlantı üzerine geldiğinde renk
değişmesini anlık değil merhale merhale değiştirelim.
Renk geçişi belli bir zaman aralığına yayılacaktır ve iki renk
arasındaki geçişte ara renkler görünecektir. Bu geçişe bazı efektlerde
ekleyebiliyoruz. Geçişin merhale merhale olması göze daha hoş
gelecektir.
Bu işleri daha önce flash veya javascript yapıyorken artık CSS3 yardımı
ile yapabilecek olmamız çok güzel bir gelişme. Basit tek satır
kod(farklı tarayıcılar için yazılan önekler zamanla teke inecektir.) ile
bu işi yapmak ayrı bir kolaylık tabi.
transition: property duration timing-function delay;
Transtion Özellikleri
Geçiş efektlerini uygulamak için aşağıdaki özelliklerden yararlanacağız.
- transition-property
- transition-duration
- transition-delay
- transition-timing-function
- transition
Şimdi bu özellikleri tek tek inceleyelim.
Geçiş Efekti Hangi Özellik İle Yapılacağını Belirleme(transition-property)
Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını
belirlemek için transition-property özelliğini kullanırız.
Yapısı: transition-property: none | all | [ \<IDENT> ] [ ',’ \<IDENT>]*
Aldığı Değerler: none | all | [ \<IDENT> ] [ ',’ \<IDENT> ]*
Başlangıç değeri: all
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok
Örneğin color değeri geçiş uygulanacak elemanın başlangıç ve son rengi
arasında bir geçiş olacağını gösterir.
all değeri tüm tanımlarda geçiş yapılacağı anlamındadır.
a{
color:red;
transition-property: color;
}
a:hover {
color:blue;
}
Geçiş Efekti Uzunluğunu Belirleme (transition-duration)
Geçiş efektlerini uygularken verdiğimiz efektin ne kadar süre ile devam
edeceğini ayarlayabiliyoruz. Bu ayarlamayı transition-duration özelliği
yapıyoruz.
Yapısı : transition-duration: \<zaman> [, \<zaman>]*
Aldığı Değerler : \<zaman> [, \<zaman>]*
Başlangıç değeri: 0
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok
0 değeri geçişin hemen olacağı anlamına gelir. Eksi değerler 0 olarak
yorumlanır.
a{
color:red;
transition-property: color;
transition-duration:0.5s;
}
a:hover {
color:blue;
}
transition-delay
Uygulanan geçiş efektinin ne kadar zaman sonra başlayacağını belirler.
Belirlenen zamana kadar animasyonu durdurur ve sonra animasyon başlar.
a{
color:red;
transition-property: color;
transition-duration:0.5s;
transition-delay: 0.5s;
}
a:hover {
color:blue;
}
Animasyonumuz 0.5 saniye sonra başlayacaktır.
transition-timing-function
Oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan
fonksiyonlardır. CSS3 ile birlikte gelen transition efekti başlangıç
tanımı doğrusal bir geçiştir. Biz bu özelliğe ease, ease-in, ease-out,
ease-in-out ve cubic-bezier değerlerini tanımlayabiliyoruz. cubic-bezier
tanımı ise geçişleri kendimize göre tanımlama imkanı veriyor. Kendi
zaman çizgimizi hazırlamak(cubic-bezier) biraz zor olsa da internet
üzerindeki bazı araçlar yardımı ile bu işte kolaylaştırılmıştır.
Daha önce sizlerle paylaştığım bu araçlar
ile transition-timing-function özelliğini kullanmak bir zevk haline
geliyor.
transition kısayolu
Yukarıda tek tek ayrı ayrı her özelliği tanımlayabildiğimiz gibi teek
bir tannımlama ile bunları kısa bir şekilde tanımlamak da mümkün.
transition-property: width;
transition-duration:0.5s;
transition-delay: 0.5s;
transition-timing-function:ease-in-out;
Yukarıdaki son örnekte geçiş tanımlarımız 4 adet idi. Biz burada bunları
tek bir tanımda toplayalım.
transition: width 0.5s ease-in-out 0.5s;
Görüldüğü gibi kodumuz daha kısa bir hal aldı. bundan sonra bu şekilde
kullanmayı tercih edeceğim.
Çoklu Geçiş Kullanımı
Yukarıda yaptığımız gibi tek bir özellik üzerinden geçiş efekti
uygulayabildiğimiz gibi virgül ile ayırmak kaydı ile birden fazla geçiş
efekti de uygulayabiliriz.
input{
display:block;
background-color:#788182;
border:0;
border-radius:5px;
width:100px;
padding:5px 10px;
color:#fff;
transition: width .5s ease-in-out, background .3s ease;
}
input:focus {
width:250px;
background-color:#50ebd6
}
Son örneğimizde arama alanına odaklandığımızda genişliğini ve ardalan
rengini geçiş efekti ile değiştirdi.
Geçiş Efektini Tetiklemek
Geçiş efektlerini tetiklemek için genelde :hover sözde sınıfı kullanılsa
da :active, :target, :focus gibi sözde sınıfları da kullanılabilir.
Ayrıca javascript ile DOM’a yapılan müdahaleler de buna eklenebilir.
a{
display:block;
background-color:#c4342f;
padding:5px 10px;
width:100px;
color:#fff;
transition: background-color 2s ease-in-out 1s;
}
a.tetikle {
background-color:blue;
}
Javascript ilede bu bağlantıya tetikle diye bir sınıf tanımlayalım.
document.querySelector('a').className = 'tetikle';
Javascript ile Geçişin Bittiğinin Kontrolü
Javascript ile geçiş efektinin bittiğini kontrol etmek çok basit.
myElement.addEventListener("transitionend", function() {
// geçiş efekti bttikten sonra bunu yap
}, true);
Geçiş efekti tamamlandığında transitionend foksiyonunu tetkilyecektir.
Tarayıcı Uyumu
CSS3 ile gelen bir çok özellik gibi geçiş efekti özelliklerinin de önek
ve internet explorer sorunları mevcuttur.
Tarayıcı Destekleme Listesi
Firefox 4+ (-moz- öneki ile), 16+ öneksiz
Chrome 1+ (-webkit- öneki ile)
Safari 3.2+ (-webkit- öneki ile)
Opera 10.5 (-o- öneki ile), 12.10 öneksiz
İnternet Explorer 10+
Mobil Tarayıcılar
iOS Safari 3.2+ (-webkit- öneki ile)
Opera Mobile 10+ (-o- öneki ile), 12.10 öneksiz
Android Browser 2.1+ (-webkit- öneki ile)
İnternet Explorer 10 ile gelen geçiş efekti desteğini öneksiz
eklemiştir. Şu an aktif olarak kullanılan ie8 ve ie9 sürümlerinde bu
özelliğin olmaması mevcut sitelerimizde bu özellikleri kullanmamız
önündeki en büyük engeldir.
Kaynaklar
yorum var.