CSS3 ile aramıza katılan transition elemanı yüksek kalitede geçiş efektleri yapmamızı sağlıyor. Neredeyse her tip öğe üzerinde kullanabileceğimiz transition, web tasarımında yeni bir devrin başlangıcı oldu.

Daha önceleri Flash ve türevi programlarla hazırladığımız web için geçiş efektleri artık CSS3 transition ile hem daha performanslı hem de daha kolay.

Bugün sizler için detaylı bir CSS3 transition dersi hazırladık.

Transition

Elemanın örnek kullanımı aşağıdaki gibidir.

transition: [özellik] [süre] [tipi] [gecikme];

Genişletilmiş kod birimi ise şu şekildedir.

transition-property: color; /* Animasyon özelliği : yazı rengi */
transition-duration: 1s; /* Animasyon süresi : 1 saniye */
transition-timing-function: ease; /* Animasyon tipi : ease */
transition-delay: 2s; /* Animasyon gecikmesi : 2 saniye */


Tüm tarayıcılarda sorunsuz çalışan kod örneği ise bu şekilde :

.ornek {
transition: background 1s ease-in;
-webkit-transition: background 1s ease-in;
-moz-transition: background 1s ease-in;
-o-transition: background 1s ease-in;
}


Birimler

Özellik : Efekti uygulayacağımız elemanı seçiyoruz. Temel kod birimi transition-property şeklindedir. Örneğin yazı rengini zamanla değiştireceksen buraya color yazıyoruz.

transition-property:color;

Aşağıdaki örneklemede arka plan renginde değişiklik yaptığımız için background terimini kullandık.

Süre : Animasyonun tamamlanma süresini saniye veya milisaniye cinsinden belirtiyoruz. Örnek verecek olursak 1s veya 100ms gibi.

Tipi : Geçişini tipini belirtiyoruz. Seçeneklerimiz şu şekilde :


  1. linear : Çizgisel geçiş. Başlangıç ve bitiş hızı aynı olan bu efekti cubic-bezier(0,0,1,1) ile de elde edebiliyoruz.

  2. ease : Animasyon yavaş başlar, sonra hızlanır ve kapanış yine yavaş olur. Bu efekti cubic-bezier(0.25,0.1,0.25,1) ile de elde edebiliyoruz.

  3. ease-in : Animasyonun yavaş başlamasını sağlar. Bu efekti cubic-bezier(0.42,0,1,1) ile de elde edebiliyoruz.

  4. ease-out : Animasyonun yavaş bitmesini sağlar. Bu efekti cubic-bezier(0,0,0.58,1) ile de elde edebiliyoruz.

  5. ease-in-out : Animasyonun başlangıç ve bitiş hızı yavaşlar. Diğer alanlar olduğu gibi kalır. Bu efekti cubic-bezier(0.42,0,0.58,1) ile de elde edebiliyoruz.

  6. cubic-bezier(n,n,n,n) : 0 ile 1 arasında değer girebildiğimiz, geçişleri manuel olarak belirlediğimiz kod tipidir.

  7. steps : Animasyon için adım belirtebileceğimiz geçiş tipidir. Örneğin steps(5, end) şeklinde ayarlandığında tüm animasyonun 5 adımda tamamlanmasını sağlarız. Geçişler diğer efektlere kıyasla daha sert olabilir.



Örnek : http://cdpn.io/nxbgf

Gecikme: Animasyonun ne zaman başlayacağını belirtmemizi sağlıyor. Temel kod birimi şu şekilde :

transition-delay: 2s;

Böylece animasyonun 2 saniye beklemeden sonra başlamasını sağlıyoruz.

Çoklu animasyon uygulama

Transition ile objelere birden fazla animasyon efekti uygulayabiliyoruz. Örneğin bir küpü daireye çevirelim, aynı zamanda arka plan ve yazı rengi de değişsin.

Örnek : http://cdpn.io/rDvGH

Yukarıdaki animasyon için kullandığımız transition kodları :

transition:
background 1s ease-in-out,
border-radius 1s ease,
color 1s linear;

-webkit-transition:
background 1s ease-in-out,
border-radius 1s ease,
color 1s linear;

-moz-transition:
background 1s ease-in-out,
border-radius 1s ease,
color 1s linear;

-o-transition:
background 1s ease-in-out,
border-radius 1s ease,
color 1s linear;
}

Tarayıcı uyumu

Firefox, Chrome, Opera ve Internet Explorer 10 gibi popüler tarayıcılar transition özelliğini desteklemekte. Safari için -webkit- kullanımı gerekiyor. Her zaman olduğu gibi Internet Explorer 9 ve öncesi bu özelliği desteklemiyor. Chrome 25 ve önceki versiyonları için -webkit- kullanımı gerekiyor.

Mobil kullanımlar : iOS Safari tarayıcısının 3.2, Anroid’in varsayılan tarayıcısı için 2.1 ve daha güncel versiyonları -webkit- kullanımı ile transition destekliyor. Opera Mobile ise 10′dan 12. versiyona kadar -o- tanımlamasına ihtiyaç duyuyor.

Örnekler

CSS3′ün transition elemanıyla ilgili örnekler arıyorsanız fazla uzağa gitmenize gerek yok. İşte daha önce sizlere sunduğumuz örneklendirmeler.


  1. CSS ile Navigasyon Menü Tasarlayalım

  2. CSS ile Renkli ve Görsel Geçişli Menü

  3. CSS3 ile Açılır Arama Kutusu

  4. HTML5 ve CSS3 ile Yaprak Menü

  5. CSS ile Etkileyici İnteraktif Logo

  6. CSS ile After Effects’e Yakın Geçiş

  7. Sadece CSS ile TAB Mantığı Kullanarak Listeleme

  8. CSS3 ile Geçiş Efekti (Transition) Kullanarak Windows 8 Tarzında Kutucuklar Hazırlamak



Kapanış

Tasarımlara transition çok şey katıyor. Bazı yorumlarda animasyonunun ve geçişlerin sitenin yavaşlamasına sebep olup olmayacağı soruluyor.

Daha önceleri çok büyük ve hantal .swf dosyalarını sırf birkaç basit animasyon için web sayfalarında kullanıyorduk. O yüzden gönül rahatlığıyla transition elemanını kullanabilirsiniz. Sitenin her santimetre karesini animasyonlarla doldurmadığınız sürece bir yavaşlamaya sebep olmayacaktır.

Kaynaklar

http://caniuse.com/css-transitions
http://www.w3schools.com/css3/css3_transitions.asp
http://css-tricks.com/almanac/properties/t/transition/

Makale Kaynak : http://www.adobewordpress.com/css3-transition-ile-gecis-efektleri