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

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 bağlantısına 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..

Farklı Tarayıcılar için @keyframes Tanımlaması

İlk etapta farklı tarayıcılar için animasyon özelliğinin uyumsuzluğundan bahsetmiştik. Bunun önüne geçebilmek için aşağıdaki şekilde farklı tarayıcı tanımlamalarını kullanabiliriz.

/* Firefox */
@-moz-keyframes ornek-animasyon {
  from {
    opacity: 0;
  }
  to {
    background-color: red;
    opacity: 1;
  }
}
/* Safari & Chrome */
@-webkit-keyframes ornek-animasyon {
  from {
    opacity: 0;
  }
  to {
    background-color: red;
    opacity: 1;
  }
}
/* Opera */
@-o-keyframes ornek-animasyon {
  from {
    opacity: 0;
  }
  to {
    background-color: red;
    opacity: 1;
  }
}

Bu şekilde farklı tarayıcılar için de @keyframes tanımlamasını gerçekleştirmiş olduk. Bu şekilde sadece animasyonu oluşturmuş olduk, şu an herhangi bir yerde kullanmadık, şimdi nasıl kullanacağımızı inceleyelim.

Animation Özellikleri ve Kullanımı

Animasyon özelliğinde süre, gecikme süresi, animasyon tekrarı gibi birden çok özellik mevcut.

animation-name: Kullanmak istediğimiz animasyonun ismi. Yukarıda @keyframes ornek-animasyon olarak tanımladığımız ornek-animasyon değerini buraya yazıyoruz.

animation-duration: Animasyonun süresi. Örneğin, 1s (1 saniye), 750ms (750 milisaniye) gibi..

animation-timing-function: Animasyonun hızı.

animation-delay: Gecikme süresi. Örneğin, 2s olarak belirttiğimizde animasyon 2 saniye gecikmeli olarak başlayacaktır.

animation-iteration-count: Animasyon tekrar sayısı. 3 olarak belirttiğimizde animasyon 3 defa çalışacaktır.

animation-direction: Animasyonun yönü. Varsayılan olarak animasyon, baştan sonra doğru çalışacaktır. Örneğin, sondan başa doğru çalışmasını istersek alternate değerini kullanabiliriz.

animation-fill-mode: Animasyon bittikten sonraki süreç. Örneğin backwards parametresini verdiğimizde, animasyon bitiminde, animasyonun ilk karesindeki özellikler uygulanır.

Bir tane de örnek yapalım.

.css-animation-ornegi {
    animation-name: ornek-animasyon;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 3;
    animation-direction: normal;
    animation-fill-mode: none;
}

Eğer birden fazla yerde animasyon kullanacaksak, bu özellikleri tek tek yazmamız gereksiz kod kalabalığına neden olacaktır. Bunun için ise kısa tanımlamayı kullanmak daha kullanışlı olacaktır.

.css-animation-ornegi {
    animation: ornek-animasyon 2s ease 0s 3 normal none;
}

Burada dikkat edilmesi gereken nokta, parametrelerin sıralaması. Verdiğimiz değerler, ilk örnekteki parametreler ile aynı sırada olmalıdır. Yani 1. parametre animation-name, 2. parametre animation-duration, 3. parametre animation-timing-function vs..