Transition mu, Animation mu?

Web icin animasyon yaparken bu iki yontemden birini kullaniyor musunuz? Bazen biri yerine diğerini seçmemiz gereken zamanlar vardır. Haydi farklılıkları tartışalım.

"Transition" nedir?

"Transition", bir elementin bir durumdan diger bir duruma gecisi sirasinda gerceklesir ve web tarayicisi bu iki durum arasindaki gecis durumlarini kendisi yaratir, bir nevi "resmeder". Birer baslangic ve bitis durumu mevcuttur.

Transition’lari genelde hover animasyonlari veya sayfaya eklenen/cikarilan elementlerin animasyonlarinda acik bir sekilde goruruz. Ornegin hover halinde minik bir font rengi degisikligi veya sayfadaki bir bilginin yavasca belirmesi ("fade in") animasyonu.

Transition bazli animasyon uygulamalari 2 durumdan ibaret olmak zorunda oldugu icin bazi ince nuanslari ayarlamakta sikinti cekebiliyoruz ama ayni zamanda gayet de pratikler.

Nerede kullanmali

Bir elementi bir durumdan digerine yavasca gecis yaptirmak istiyorsak, transition yontemi iyi bir secim olabilir. Basit degisiklikler transition ile halledilebilir, ayrica zamanlama fonksiyonlari sayesinde bu islemi biraz daha kisisellestirebilirsiniz.

Transition uygulamali animasyon, butona hover edildiginde veya tiklandiginda gayet iyi calisacaktir:

Veya sayfaya yeni bir element eklendiginde:

Bir liste ogesi
Bir liste ogesi

Peki ya "Animation"?

"Animation" teknigi, gayet kuvvetli bur "Transition" alternatifidir. Sadece 1 baslangic ve 1 bitis durumuna bagli kalmak yerine, "animation" teknigiyle yapilan animasyonlarda bircok ara durum yaratilabilir ve animasyon uzerinde cok daha fazla hakimiyet saglanabilir.

Transition’da animasyon sadece A’dan B’ye dogru degisiklik gosterirken, Animation’da ihtiyaciniz dahilinde A, B, C, D, (…) istediginiz kadar durum yaratabilirsiniz.

Animation’lar bunu keyframe‘ler kullanarak yapar. Transition kullanimi icin CSS class’imizda tek bir satir belirtmemiz yeterli olurken, Animation icin CSS’te ayri olarak farkli keyframe’ler belirtmek gerekir.

Nerede kullanmalı

Bir animasyon tam sayfa yuklendiginde calismaliysa veya basit bir A durumundan B durumuna gecis animasyonundan daha kompleks bir ihtiyaciniz varsa, Animation teknigini kullanmak cok daha uygun olur.

Ornegin bir animasyonu sayfa yuklendikten belirli bir zaman sonra calistirmak istiyorsaniz da kullanisli olacaktir; ornegin Baymax karakterimizin goz kirpma animasyonu gibi:

Animation teknigi, eger sayfamizdaki bir elementi sayfa uzerinde birden fazla noktaya dogru hareket ettireceksek de kullanisli olabilir. Ornegin sitemize yeni uye olan kisiye site fonksiyonlarini tanitan bir animasyonda mouse imleci gorselini sayfanin farkli yerlerine hareket ettirebiliriz.

"Karar verebilen, acıyı yener." -Goethe

Gecenlerde hazirladigim bir ornekte aslinda Animation kullanacaktim, ancak sonradan Transition kullanimi icin gayet iyi bir ornek haline geldi.

Bu saati tasarlamaya basladigimda akrep ve yelkovan hareketlerini sayfa yuklendiginde hemen baslatarak devamli hareket etmelerini saglamistim. Animation ozelligini kullanmak icin gayet ideal bir durumdu. Sayfa yuklendiginde animasyon baslaycakti ve sonsuza dek devam edecekti. Saat daha karmasik hale geldikce, akrep ve yelkovanin acilarini JavaScript ile hareket ettirme fikri cok daha mantikli geldi.

Gostergeler JavaScript ile hareket ettirilince haliyle transition kullanmak farz oldu. JavaScript ile gostergenin acisi her degistiginde, CSS transition ozelligi sayesinde gecis animasyonunu (A durumundan B durumuna, yani eski acidan yeni aciya) yaratmis oldum - animation teknigine nazaran cok daha kullanisli ve zarif bir sekilde.

Ornek hakkinda daha fazla bilgi icin CSS ile Saatler makalesine goz atabilirsiniz.

Ozetle

Bir durumdan digerine zarif bir gecis icin Transition, daha kompleks ve bir seri halinde gerceklesecek animasyonlar icinse Animation kullanmalisiniz.

Transition teknigi kullanmak nispeten cok daha kolaydir ve bircok animasyon icin idealdir. Eger animasyonunuz uzerinde daha fazla kontrolunuz olmasi gerekiyorsa, animasyonunuz bircok asamadan olusuyorsa veya animasyonunuzun sayfa yuklendiginde baslamasi gerekiyorsa Animation teknigi ideal olacaktir.