CSS3 Geçiş Efektleri(Transitions)

15 Ocak 2013

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ı Desteği

Chrome explorer Firefox
1.0+ (-webkit) 10+ 4.0+ (-moz)

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ (-webkit) 3.2+ (-webkit) 36+

İ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

Daha fazla oku

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı Devamını oku

field-sizing özelliği

05 August 2024 tarihinde yayınlandı.

Tarayıcı geliştirici araçlarında yakınlaştırma ve uzaklaştırma yapmak

10 June 2024 tarihinde yayınlandı.