CSS Dersleri

CSS3 Geçiş Efektleri(Transitions)

Fatih Hayrioğlu

15 Oca 2013 — 6 min read

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.

{% highlight css %} transition: property duration timing-function delay; {% endhighlight %}

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 {: .cssozelliktanimi}

Ö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.

{% highlight css %} a{ color:red; transition-property: color; }

a:hover { color:blue; } {% endhighlight %}

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 {: .cssozelliktanimi}

0 değeri geçişin hemen olacağı anlamına gelir. Eksi değerler 0 olarak yorumlanır.

{% highlight css %} a{ color:red; transition-property: color; transition-duration:0.5s; } a:hover { color:blue; } {% endhighlight %}

transition-delay

Uygulanan geçiş efektinin ne kadar zaman sonra başlayacağını belirler. Belirlenen zamana kadar animasyonu durdurur ve sonra animasyon başlar.

{% highlight css %} a { color:red; transition-property: color; transition-duration:0.5s; transition-delay: 0.5s; } a:hover { color:blue; } {% endhighlight %}

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.

{% highlight css %} transition-property: width; transition-duration:0.5s; transition-delay: 0.5s; transition-timing-function:ease-in-out; {% endhighlight %}

Yukarıdaki son örnekte geçiş tanımlarımız 4 adet idi. Biz burada bunları tek bir tanımda toplayalım.

{% highlight css %} transition: width 0.5s ease-in-out 0.5s; {% endhighlight %}

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.

{% highlight css %} 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 } {% endhighlight %}

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.

{% highlight css %} 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; } {% endhighlight %}

Javascript ilede bu bağlantıya tetikle diye bir sınıf tanımlayalım.

{% highlight javascript %} document.querySelector('a').className = 'tetikle'; {% endhighlight %}

Javascript ile Geçişin Bittiğinin Kontrolü

Javascript ile geçiş efektinin bittiğini kontrol etmek çok basit.

{% highlight javascript %} myElement.addEventListener("transitionend", function() { // geçiş efekti bttikten sonra bunu yap }, true); {% endhighlight %}

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


1.0+ (-webkit)	10+	4.0+ (-moz)
{: .tarayici-uyumi}

Mobil Tarayıcılar


2.1+ (-webkit)	3.2+ (-webkit)	36+
{: .tarayici-uyumi}

İ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.