CSS3 Animasyon(Animation)

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.

W3C standard - Firefox	webkit	Opera	IE10
animationstart	webkitAnimationStart	oanimationstart	MSAnimationStart
animationiteration	webkitAnimationIteration	oanimationiteration	MSAnimationIteration
animationend	webkitAnimationEnd	oanimationend	MSAnimationEnd

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.