CSS3 plan modülleri hala üzerinde çalışmaya devam edilen yapılardır. CSS3 plan yapılarını kökten değiştirecek ve ihtiyaçları tam karşılayacak şekilde değişikliklere gidiyor. Henüz gelişme aşamasındaki bu yaklaşımlar hakkında biraz bilgi sahibi olalım. Daha önce bahsettiğimiz ve burada genel manası ile sizlere bahsedeceğim modüller var. Daha önceki makalelerimde çoklu kolonlar(multi column layout) ve Esnek kutu yerleşimi(flexible box layout) konularını ilgili makalelerinden daha detaylı bilgiyi edine bilirsiniz.

CSS3 Çoklu Kolonlar(multi column) Modülü

Bu modülün tamamlanmış ve tüm yeni nesil tarayıcılar tarafından desteklenmiş olması güzel bir a. CSS3 plan modülleri arasında öğrenilmeye başlanacak en iyi modüldür.

Detaylı bilgi için https://fatihhayrioglu.com/css3-coklu-kolonlar/

CS3 Esnek Kutu (flexible box) Modülü

Esnek kutu modeli yeni planlama modülleri arasında en çok isminden söz ettiren modül. Bazı karışık plan sorunlarına güzel çözümler üretmektedir.

Detaylı bilgi için https://fatihhayrioglu.com/css3-esnek-kutu-yerlesimiflexible-box-layout/

CSS3 Izgara(Grid) Modülü

CSS ızgara modülünü Microsoft önerdi ve şu an kararlı bir şekilde çalışıyor. İnternet Explorer 10 ile test edebileceğimiz bir modül.

Izgara Düzeni; sayfa veya uygulamaları büyük bloklara bölmeye yarayan bir modüldür. Bu bölme işlemi tablo düzeni gibi satır ve sütunlara bölerek yapar.

Tablo kullanımına benzese de herhangi bir fiziksel html elemanına(table, td ve tr gibi.) ihtiyacı olmaması farklı çözünürlükteki araçlar uyumlu yapıları olmasını sağlıyor.

• http://www.w3.org/TR/css3-grid-layout/

• http://24ways.org/2012/css3-grid-layout/

• hugogiraudel.com/2013/04/04/css-grid-layout/

• http://msdn.microsoft.com/en-us/library/ie/hh673533(v=vs.85).aspx

• http://css-tricks.com/almanac/properties/g/grid/

• http://www.alsacreations.com/article/lire/1388-css3-grid-layout.html

CSS3 Bölgeler (Regions) Modülü

CSS3 Bölgeler modülü Adobe tarafından üretilip w3c’ye önerilen bir modül. Tarayıcı desteği konusunda sıkıntılı bir modül. Sadece İnternet Explorer 10’un desteği var şu an. Karışık yapılı planlamaları karşılayabilecek bir modül. Dergi ,gazete ve test kitabı benzeri planlamalar için gayet başarılı bir modül. Bu modülü kullanarak çok çekici sayfalar oluşturulabilir.

• http://net.tutsplus.com/tutorials/html-css-techniques/diving-into-css-regions/

• http://msdn.microsoft.com/en-us/library/ie/hh673537(v=vs.85).aspx

• http://blogs.adobe.com/webplatform/category/features/css-regions/

• adobe.com/devnet/html5/articles/css3-regions.html

• http://galjot.si/css-regions

• http://css-tricks.com/content-folding/

CSS3 İstisna (Exclusions) Modülü

CSS3 İstisnalar ve şekiller modülü ile yazılar resimlerin etrafında veya içerisinde sarılabiliyoruz.

• http://dev.w3.org/csswg/css-exclusions/

• http://www.techrepublic.com/blog/webmaster/experiment-with-css3-exclusions-and-shapes-module/2586

• http://adobe.github.io/web-platform/samples/css-exclusions/

Sonuç

Web alemi geliştikçe ve farklı mecralara yayıldıkça farklı sayfa planlarına ihtiyaç duyulmaktadır. CSS3 bu konuda çabalıyor, ancak bana göre tüm isteklere bir çözüm bulmak zor. CSS3’ün bir çok yeni özelliği tarayıcılar tarafından desteklenmekte iken bazı planlama modülleri destek ve gelişme açısından geride kalmaktadır.

Ben daha önce desteği fazla olan çoklu kolan ve esnek kutu modelini anlatmıştım. Izgara modülü, Bölgeler ve İsitisnalar modülleri henüz yeterliliklerini kabul ettiremedikleri için sadece biraz bahsedip geçtim. İleride bu modüller gelişip desteğini arttırırsa detaylı yazılarını yazabilirim.

Kalın sağlıcakla

Bir önceki yazımda CSS3 geçiş efektlerini anlatmıştım. CSS3 animasyon özellikleri geçiş efektlerine benzer özellikleri ve daha fazlasını içermektedir. Animasyon işleri ile daha önce uğraşanlar için çok tanıdık kodları var. CSS3 Animasyon özelliği; javascript veya flash olmadan bize animasyon yapma imkanı sağlamaktadır.

Animasyon tanımlarında tanımlamalar ve zamanlama önceden yapılır sonra uygulanacak elemana tanımlanır.

Tarayıcı desteği konusunda ilk başta sıkıntılı olsa da şimdi daha iyi bir noktada. http://caniuse.com/#search=css3%20animation verilerine göre %72’lik bir desteğe sahip.

CSS3 animasyon özelliğini ie10 hariç ön ek ile desteklemektedir. Ben buradaki örneklerde öneksiz göstereceğim.

Anahtar Kare (Keyframes)

Daha önce flash ile uğraşmış insanlara yabancı olmayan bir kavram. Animasyonu bir süreç olarak kabul edersek, anahtar kare(keyframe) bize geçişin başlangıç ve bitişi arasındaki durumları tanımlamamız için olanak sağlar.

@keyframes Kuralı

CSS3 anahtar kare(keyframe) tanımı bir @kuralı olarak tanımlanır. Normal CSS tanımları içerir, ancak farklı olarak tanımlayıcı bir isim ve her kareye bir tanım yapmamızı sağlayan bir yapıya sahiptir.

@keyframes animasyom_ismi {
  keyframe {
    property : value;
  }
}

animasyom_ismi tekil bir tanımıdır, daha sonra elemente animasyon uygulamak istediğimizde kullanılmak üzere.

@keyframes soldanGelen {
  0% {
    left: 0;
  }
  50% {
    left: 100px;
  }
  100% {
    left: 200px;
  }
}

Yukarıdaki kod ile ‘soldanGelen’ animasyonumuza üç adet anahtar kare(keyframe) oluşturmuş olduk. Animasyonumuzun 0%, 50% ve 100%’ün de anahtar kare (frame) meydana getirmiş olduk. Her kare’de(frame) elemana istediğimiz animasyonu uygulayabiliyoruz.

Ayrıca (0% - 100%) kullanımı yerine (from - to) kullanımıda vardır.

Animasyon Özellikleri

Anahtar kare(keyframe) tanımından sonra animasyon özellikleri tanımlarına geliyor sıra. Bu özellik tanımları CSS tanımlarına benzer bir yapısı vardır. Aşağıda bunları tek tek inceleyelim.

• animation-name
• animation-duration
• animation-timing-function
• animation-iteration-count
• animation-direction
• animation-delay
• animation-play-state
• animation-fill-mode
• animation

Animasyonun adı (animation-name)

Yapısı : animation-name: <single-animation-name>
Aldığı Değerler : none | IDENT [, none | IDENT ]*
Başlangıç değeri: none
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok

Bir elemana animasyon uygulayacağımız zaman ilk olarak bir isim tanımlamamız gerekiyor.

#gonderGelsin {
  animation-name: gonder;
}

Tek değer alır ve tanımlanan değer yukarıda belirttiğimiz gibi anahtar kare’ye parametre olarak eklenir. Bunun dışında none değeride alır. Animasyon ismini tırnak içinde yazınca Firefox’da çalışmıyor.

Animasyonun zamanı (animation-duration)

Yapısı : animation-duration: <zaman> [, <zaman>]
Aldığı Değerler : <zaman> [, <zaman>]
Başlangıç değeri: 0s
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok

Animasyonun ne kadar süreceğini belirtmek için bu özelliği kullanırız.

#gonderGelsin {
  animation-name: gonder;
  animation-duration: 3s;
}

Animasyonun 3 saniye devam edeceğini gösterir. Daha önce gördüğümüz transition-duration özelliğine benzer bir özelliktir. Zaman değerleri alır; ms, s ve 0 değerleri alır.

Zamanlama fonksiyonu (animation-timing-function)

Yapısı : animation-timing-function: <single-timing-function> [ ‘,’ <single-timing-function> ]*
Aldığı Değerler : ease | linear | ease-in | ease-out | ease-in-out | cubic- bezier(<number>, <number>, <number>, <number>)
Başlangıç değeri: ease
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok

Geçiş efektlerinde benzer diğer bir tanımı animation-timing-function tanımıdır.  transition-timing-function özelliğine benzer bir özelliktir.

div {
  animation-timing-function: keyword
  /* veya */
  cubic-bezier(x1, y1, x2, y2);
}

Aldığı değerler ease, linear, ease-in, ease-out, ve ease-in-out

#gonderGelsin {
  animation-name: gonder;
  animation-duration: 3s;
  animation-timing-function:ease;
}

Animasyonun esnek bir şekilde meydana gelmesini sağlar.

Animasyonun tekrar sayısı (animation-iteration-count)

Yapısı : animation-iteration-count: <single-animation-iteration-count> [ ‘,’ <single-animation-iteration-count> ]*
Aldığı Değerler : infinite | <sayı>
Başlangıç değeri: 1
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok

Bu tanım animasyonun kaç kere tekrarlanacağını belirler.

#gonderGelsin {
  animation-name: gonder;
  animation-duration: 3s;
  animation-timing-function:ease;
  animation-iteration-count: 3;
}

animation-iteration-count tanımı tüm pozitif rakamları alabilir. Animasyonun daimi olarak devam etmesini istiyorsak infinite değerini atamalıyız. Başlangıç değeri 1’dir.

Animasyonun yönünü (animation-direction)

Yapısı : animation-direction: <single-animation-direction> [ ‘,’<single-animation-direction> ]*
Aldığı Değerler : normal | reverse | alternate | alternate-reverse
Başlangıç değeri: normal
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok

Animasyonlar normalde başlangıçtan sona doğru hareket eder. Bazen ise bu akışı tersine çevirmek isteriz. Animasyonun yönünü belirleye biliyoruz, ileri doğru veya tersine aksın diyebiliyoruz.

Başlangıç değer normal olarak tanımlıdır. Aldığı değerler

• normal Animasyon her çalışmadan baştan sona doğru çalışır. Yani animasyonun her döngüsünde baştan başlayacak. Bu özelliğin başlangıç değerdir.
• alternate Animasyon sondan başa hareket eder. Animasyon terse oynarken her adımı geri doğru hareket eder. animation-timing-function foksiyonuda tersine döner, yani ease-in tanımlı ise bu tanım yapıldığında animasyon ease-out şeklinde oynayacaktır. Animasyon tekrar sayısı tanımlı ise, her tek ve çift sayı için bu durum tekrar edecektir.
• reverse Animasyon her döngüde geriye doğru oynar. Animasyonun her döngüsünde sondan başa hareket eder.
• alternate-reverse İlk döngüde sondan başa, sonra baştan sona doğru hareket eder. Animasyon tekrar sayısı tanımlı ise, her tek ve çift sayı için bu durum tekrar edecektir.

Örneğe devam;

#gonderGelsin {
  animation-name: gonder;
  animation-duration: 3s;
  animation-timing-function:ease;
  animation-iteration-count: 3;
  animation-direction: alternate-reverse;
}

Animasyonu tersine çevirecektir. Metin sağdan sola değil, soldan sağa doğru gelecektir.

Animasyona ara verme (animation-delay)

Yapısı : animation-delay: <zaman> [, <zaman>]
Aldığı Değerler : <zaman> [, <zaman>]
Başlangıç değeri: 0ms
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok

animation-delay tanımı animasyonun başlamadan önce belli bir süre bekletmemizi sağlar.

#gonderGelsin {
  animation-name: gonder;
  animation-duration: 3s;
  animation-timing-function:ease;
  animation-iteration-count: 3;
  animation-direction:reverse;
  animation-delay: 4s;
}

Tanımı ile animasyon tetiklenmesinden itibaren 4 saniye sonra başlayacaktır. Bu tanım pozitif ve negatif rakam alabilir. Pozitif değerler animasyonu bekletirken, negatif değerler atandığında animasyon hemen başlayacak ve belirlenen saniyeden sonra görünmeye başlayacaktır.

Animasyonu Durdurma (animation-play-state)

Yapısı : animation-play-state: <single-animation-play-state> [ ‘,’ <single-animation-play-state> ]*
Aldığı Değerler : running | paused
Başlangıç değeri: running
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok

Diğer bir animasyon özelliğide animation-play-state özelliğidir, animasyon yürütme kontorolünü yapar. İki değer alır; çalıştır(running) veya durdur(paused). Bir animasyonu durdurmak için

animation-play-state: paused;

Tanımını yapmamız yeterlidir. Örneğimizde elemanın üzerine geldiğimizde animasyonun durdurmak için

.polyfill:hover{
  animation-play-state: paused;
}

Tanımını eklememiz yeterli olacaktır. Bu özelliğe javascript ile erişerek daha dinamik örnekler oluşturabiliriz.

animation-fill-mode

Bu özellik animasyonun bitiminden sonra veya animation-duration ile belirlenen zaman sırasında nasıl davranacağını belirler. animation-fill-mode aşağıdaki değerleri alır.

• none başlangıç değeridir — Başlangıç değeri olarak kullanılan bu değer ile animasyon bittikten sonra geri dönmesini sağlar ve kendi tanımlarını alır. Animasyonun başındaki animation-duration ile tanımlanan zaman sırasında herhangi bir stil uygulanmaz.
• forwards animasyon bittikten sonra; son anahtar karede animasyonda tanımlanan özellik korunur. none değerinde animasyonun başına dönerken, forwards tanımında son kare özellikleri korunarak kalır.
• backwards Tanımlanan animasyon durdurma(animation-delay) zamanında, uygulanan animasyonun ilk karesindeki değer tanımlanır. none değerinde durdurma zamanında herhangi bir tanım almazken, backwards tanımında tanımlana animasyonun ilk kare özelliklerini alır.
• both elemente forwards ve backwards aynı anda uygulanır. Hem animasyonun durdurma zamanında ilk kare özelliklerini alır, hemde son kare değerleri elemanda tanımlı kalır.

Yapısı : animation-fill-mode: <single-animation-fill-mode> [ ‘,’ <single-animation-fill-mode> ]*
Aldığı Değerler : none | forwards | backwards | both
Başlangıç değeri: none
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok

animation-fill-mode özelliği animasyonun dışında hedef elemana uygulanacak stillerin nasıl uygulanacağını tanımlar.

Bu özellik sayesinde bazı kesilme ve garip atlamaları engelleyebiliriz. animation-fill-mode özelliğini kullanarak fazladan kod yazmadan bu tip sorunları engelleyebilirsiniz.

Animasyon Kısayolu(animation)

Yapısı : animation: <single-animation> [ ‘,’ <single-animation> ]*
Aldığı Değerler : <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>
Başlangıç değeri: animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
Uygulanabilen elementler: tüm elementler ve :before ve :after elementlerine
Kalıtsallık: Yok

Yukarıda animasyon özelliklerini tanımladık. Bu tanımları önek ile birlikte yazdığımızda bir sayfaya yakın bir kod yığını ortaya çıkmaktadır. Bu kod yığınını azaltmak için ve daha kısa kod yazmak için animation tanımı ile yukarıdaki tanımları azaltabiliriz. Bu tanımlama ile animation-name, animation-duration, animation-timing-function, animation-iteration-count, animation-direction, animation-delay ve animation-fill-mode tanımlarını tek bir tanım içine almış oluruz.

Örneğimiz göz önüne alırsak;

.canCanli {
  animation-name: gelsinGitsin;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-delay: 5s;
  animation-fill-mode: forwards;
}

Tanımı yerine

.canCanli {
  animation: gelsinGitsin 2s ease-in-out 2 alternate 5s forwards;
}

7 satır kod tek satıra indi. Yukarıdaki sıra önemlidir; name, duration, timing function, count, direction, delay, and fill- mode. Her tanım birbirinden boşluk ile ayrılır. Sadece adı ve süresi yazılması gerekmektedir, diğer değerler isteğe bağlıdır.

Birden fazla tanımı virgül ile ayırırız.

.polyfill {
  animation-name: gradientMove, reload;
  animation-duration: .8s, 8s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

Yerine

.polyfill {
  animation:gradientMove .8s 4 both linear alternate-reverse, reload 8s 4 both linear alternate-reverse;
}

Javascript, Flash ve CSS3 Animasyon Avantaj ve Dezavantajları

Animasyon işini daha önce ve hala javascript ve flash ile yaparken şimdi niye css ile yapıyoruz diye akıllara gelebilir. Bu başlık altında javascript flash ve css3 ile animasyon yapımının avantaj ve dezavantajlarını inceleyeceğiz.

Flash Artıları

• Animasyon oluşturmak için köklü ve sağlam bir Editöre sahip
• Actionscript ile daha programatik ve güçlü bir animasyon yeteneğine sahip

Flash Eksileri

• Mobil ortam desteğinin az olması.
• Bir plugin bağımlılığı olması ve devamlı güncelleme istegi
• Arama motorları ve ekran okuyucuları gibi cihazlardan erişememe sorun.

Javascript Artıları

• Gelişmiş ve iyi animasyon frameworkleri
• Web geliştiricilerin alışık olduğu HTML, CSS ve DOM öğeleri üzerinden işlem yapma
• CSS’e göre daha avantajlı ve programatik güç ve esneklik.

Javascript Eksileri

• Kullanıan frameworkler nedeniyle yavaşlık ve fazla HTTP isteği
• Sözdizimindeki framework kullanım zorluğu
• Javascript ile oluşturulan içeriğin arama motorlarının erişim sıkıntıları.

CSS3 Artıları

• Bildik kullanım alanı
• Standart CSS sözdizimi
• Basit öğrenme
• Javascripte göre daha yüksek frame oranları ve tarayıcıda daha hızlı ve esnek geçişler
• Mevcut HTML elemanları üzerinde oynama imkanı ve SEO avantajı sayılabilir.

CSS3 Eksileri

• Tarayıcı desteği bakımından sıkıntılar mevcut. (İnternet Explorer sorunu)
• Animasyon araçları konusunda zengin bir alan yok, daha çok kod ile üretmek zorunluluğu var.

Animasyon Olaylarının Kullanımı

Animasyon olaylarını kullanarak animasyonlara ekstra özellikleri kazandırabiliriz. AnimationEvent nesnesini kullanarak animasyonun başladığını, bittiğini ve döngüsünü tespit edebiliriz. Javascript ile kare kare kontrolün olmaması bir sorun.

Animasyonu dinleyen bir fonksiyon

function setup() {
  var e = document.getElementById("anim");
  e.addEventListener("animationstart", listener, false);
  e.addEventListener("animationend", listener, false);
  e.addEventListener("animationiteration", listener, false);

  var e = document.getElementById("anim");
  e.className = "polyfill";
}

Tüm animasyon olaylarını dinleyen bir fonksiyon yaptık. İlk başlangıcı yakalamak için animasyonun uygulandığı sınıfı sonrada tanımlıyoruz. Olayları yakalamk için listener fonksiyonuna gönderiyoruz.

function listener(e) {
    var l = document.createElement("li");
    switch(e.type) {
      case "animationstart":
        l.innerHTML = "Başlangıç: " + e.elapsedTime;
        break;
      case "animationend":
        l.innerHTML = "Son: " + e.elapsedTime;
        break;
      case "animationiteration":
        l.innerHTML = "Döngüye başlama: " + e.elapsedTime;
        break;
    }
    document.getElementById("output").appendChild(l);
}

Tarayıcılara göre metot isimleri farklılık gösteriyor.

Tarayıcı Desteği

1.0+ (-webkit)	10+	4.0+ (-moz)

Mobil Tarayıcılar

2.1+ (-webkit)	2.0+ (-webkit)	36+

Sonuç

CSS3 animasyon özelliği CSS’in web’deki görselliği tek başına temsil etmesi açısından büyük bir adımdır. HTML elementlerine animasyon özelliği kazandırması gelecekte daha yaygın olarak kullanılmasına yol açacaktır. Basit ve genel kullanılan animasyonları normal CSS kodu yazar gibi kodlasak da daha gelişmiş animasyonlar için bir editör ihtiyacı ortaya çıkacağı kesindir. Bu konuda şimdi görünen en büyük editör Adobe’nin Egde aracıdır. Flash ile büyük bir bilgi birikimine sahip olan Adobe CSS3 animasyonuna da büyük destek sağlayacağı ortadır. Tabi rekabetin olması ve farklı araçların çıkması her zaman bizim gibi geliştiricileri için bir artıdır.

Ben sizlere burada işi teorisini açıklamaya çalıştım bilgileriniz geliştirmek için yapılmış animasyon örneklerini incelemeniz ve kendi animasyonlarınızı hazırlamanız önemli. Kaynak bölümündeki örnekleri incelemenizi öneririm.

Kalın sağlıcakla.

Kaynaklar

• http://www.w3.org/TR/css3-animations/
• http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/
• http://www.vanseodesign.com/css/animation/
• http://www.w3schools.com/css/css3_animations.asp
• http://css3.bradshawenterprises.com/animations/
• http://daneden.me/animate/”>http://daneden.me/animate
• https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations
• http://www.netmagazine.com/tutorials/masterclass-css-animations
• http://css-tricks.com/snippets/css/keyframe-animation-syntax/
• http://www.webkit.org/blog/138/css-animation/
• http://matthewlein.com/ceaser/ (animasyon aracı)
• http://www.sitepoint.com/build-awesome-apps-with-css3-animations/#fbid=qIRziNGN-f6
• http://caniuse.com/css-animation (tarayıcı desteği)
• http://www.hongkiat.com/blog/css3-animation-transition-demos/ (örnekler)
• http://www.webdirections.org/blog/let-the-web-move-you-css3-animations-and-transitions/
• http://samuli.hakoniemi.net/having-fun-with-css-keyframes/ (Örnekli anlatım)
• http://westciv.com/tools/animations/ (animasyon aracı)
• http://www.inserthtml.com/2012/01/definitive-guide-css-animations-transitions/
• https://dev.opera.com/articles/css3-vs-jquery-animations/
• http://www.onextrapixel.com/2011/08/31/enhance-your-sites-with-css3-animations/ (örnekli anlatım)
• http://24ways.org/2009/css-animations/ (örnekli anlatım, loading)
• http://tympanus.net/codrops/
• http://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/
• http://tympanus.net/codrops/2012/12/31/how-to-create-a-simple-multi-item-slider/
• http://tympanus.net/codrops/2012/06/25/timed-notifications-with-css-animations/
• http://tympanus.net/codrops/?s=keyframe
• https://dev.opera.com/articles/css3-animations/
• https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations?redirectlocale=en-US&redirectslug=CSS%2FUsing_CSS_animations
• http://www.sitepoint.com/css3-animation-javascript-event-handlers/
• http://www.valhead.com/2013/01/04/tutorial-css-animation-fill-mode/
• http://www.kirupa.com/html5/all_about_css_animations.htm

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

• http://matthewlein.com/ceaser/
• http://easings.net/
• jeremyckahn.github.com/stylie/

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

1.0+ (-webkit)	10+	4.0+ (-moz)

Mobil Tarayıcılar

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

• http://www.w3.org/TR/css3-transitions/
• http://www.alistapart.com/articles/understanding-css3-transitions/
• developer.mozilla.org/en-US/CSS/CSS_transitions
• http://24ways.org/2009/going-nuts-with-css-transitions
• http://www.impressivewebs.com/css3-transitions-without-hover/
• http://www.css3.info/preview/css3-transitions/
• http://samuli.hakoniemi.net/css3-transitions-are-we-there-yet/
• http://css3.bradshawenterprises.com/transitions/
• http://www.joelambert.co.uk/morf/ (araç)
• http://cubic-bezier.com/ (araç)
• http://www.roblaplaca.com/examples/bezierBuilder/ (araç)
• http://www.netzgesta.de/dev/cubic-bezier-timing-function.html (araç)
• http://www.kirupa.com/html5/looking_at_css3_transitions.htm
• http://bavotasan.com/2011/a-simple-fade-with-css3/
• http://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/ (örnek)
• http://caniuse.com/css-transitions (tarayıcı desteği)
• http://www.opera.com/docs/specs/presto23/css/transitions/
• adobe.com/devnet/html5/articles/using-css3-transitions-a-comprehensive-guide.html
• http://smashinghub.com/css3-transitions-and-animations.htm (örnekler)
• http://msdn.microsoft.com/en-us/library/ie/hh673535(v=vs.85).aspx
• tv.adobe.com/watch/learn-dreamweaver-cs6/using-the-css-transitions-panel/?go=13279
• http://www.phpkodlari.com/css-dersleri/css3-transitions-ozelligi/
• blogs.msdn.com/b/ie/archive/2011/11/21/adding-personality-with-css3-transitions-and-animations.aspx
• http://www.inserthtml.com/2012/01/definitive-guide-css-animations-transitions/#transitions
• http://vimeo.com/49879139 (video)
• http://ricostacruz.com/jquery.transit/ (jquery ile tüm tarayıcılar için)
• http://www.netmagazine.com/tutorials/more-efficient-css3-transitions
• http://proto.io/freebies/onoff/ (örnek)
• http://geebart.com/blog/easy-css3-transitions-tutorial
• http://webdesigncrowd.com/animated-navigation-css3-transitions-transforms/
• http://davidwalsh.name/css-transitions
• http://css3.bradshawenterprises.com/transitions/
• http://www.webdesignerdepot.com/2012/12/how-to-use-the-css3-transition-property/
• problogdesign.com/coding/get-started-with-css3-transitions-today
• http://code.tutsplus.com/tutorials/css-fundamentals-css3-transitions–pre-10922