CSS Animation Nedir, Nasıl Kullanılır?

CSS Animation Nedir, Nasıl Kullanılır?

CSS 3 Animation özelliği ile jQuery ve flash kullanmaya gerek kalmadan animasyon oluşturmak ve kullanmak mümkün. Tüm tarayıcılar için %100 bir destek var diyememiş olsak da birçoğunun desteklediğini söylemek mümkün. https://www.caniuse.com/#search=animation bu bağlantıya tıklayarak kullandığınız tarayıcının ve sürümününün CSS 3 Animation özelliğini destekleyip desteklemediğini görebilirsiniz.

Eğer daha önce Flash ile ilgilendiyseniz, CSS 3 Animation özelliğini hızlıca kavrayabilirsiniz. Şimdi CSS 3 Animation özelliğinin nasıl kullanıldığını ve parametrelerini inceleyelim.

Temel anlamda animasyon, aşağıdaki kod bloğundaki gibi oluşturuluyor.

@keyframes animasyon_adi {

  keyframe {
    property : value;
  }

}

@keyframes: Animasyon tanımlarken @keyframes tanımlaması ile başlıyoruz.

animasyon_adı: Burada animasyonun adını tanımlıyoruz. Herhangi bir element üzerinde, oluşturacağımız animasyonu kullanmak istediğimizde bu tanımladığımız ismi kullanacağız.

keyframe: Burada başlangıç ve bitiş noktalarını daha doğrusu animasyonun hangi karede ne yapacağını belirtiyoruz.

property, value: Burada da animasyonun özellik ve değerlerini tanımlıyoruz.

Aşağıda bir örnekle bu parametreleri inceleyelim.

@keyframes ornek-animasyon {
  0% {
    opacity: 0;
  }

  100% {
    background-color: red;
    opacity: 1;
  }
}

ornek-animasyon isminde animasyonumuz oluşturduk. Animasyonun başlangıcında yani 0% bölümünde şeffaflık değerini 0 olarak tanımladık. Animasyonun sonunda yani 100% bölümünde şeffaflık değerini 1 ve arka plan rengini de kırmızı olarak tanımladık. Aynı yapıyı 0% - 100% yerinde from - to olarak da kullanabilirsiniz. Aşağıda kullanım şeklini görebilirsiniz.

@keyframes ornek-animasyon {
  from {
    opacity: 0;
  }

  to {
    background-color: red;
    opacity: 1;
  }
}

Siz de araya farklı % dilimleri ekleyerek farklı adımlarda farklı animasyonlar oluşturabilirsiniz. Örneğin, 25%, 50%, 64%, 78% gibi..