CSS3 ile Animasyon Nasıl Yapılır?

CSS3’ün gelmesiyle bir çok yenilik ortaya çıktı. Neredeyse JQuery’e kafa tutacak özellikler eklenen son sürüm CSS ile kare kare animasyonlar yapmak mümkün.

CSS3 Animasyonlar Özellikleri:

• Saniye saniye, kare kare animasyonlar yapmaya olanak sağlıyor.
• Bir çok tarayıcıya uyumlu
• Kolay kullanım
• Zamanlandırma ayarları

Örnek bir CSS3 Animasyon Keyframes Yapısı:

@keyframes animasyonumuz{
keyframe{
/* Kare özellikleri
}
}

Gördüğünüz gibi @keyframes etiketi ile bir animasyon yaratacağımız anlamına geliyor. “animasyonumuz” ile de yarattığımız animasyonun adını belirledik.

Keyframe{ } diye belirttiğim yerde ise değişiklikler yaparak kare kare olaylar yapabiliyoruz.

Örneğin, sağdan sola giden basit bir animasyon yapalım.

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

Şimdi bunları tetikleyecek bir ve animasyona maruz kalacak div yapalım.

.kutu{
width:100px;
height:100px;
background:#333;
animation-name: sagdansola;

Gördüğünüz gibi animasyonumuzda bir soldan sağa giden div yapacaktık. .kutu adlı stil oluşturduk ve bir kutu elde etmek için gerekli kodları yazdık ve animation-name özelliğine oluşturduğumuz @keyframes adını verdik. Bu şekilde .kutu divinin animasyona uğramasına ve tetiklemesine izin verdik.

Örneğin bir de HTML kodları:

<div class="kutu>
</div>

Animation-Duration (Animasyon zamanı):

Bu özellik animasyonun ne kadar devam edeceğini belirtir. Örneğin 4 saniye devam eden animasyon yapalım.

.kutu{
 animation-duration: 4s;
}

Animation-timing-function (Geçiş efekti gibi):

Bu özellik ile geçişler daha akışkan daha değişik bir efektle çalışıyor.

.kutu{
 animation-timing-function:ease;
}

Animation-iteration-count (Tekrarlanma sayısı):

Aynı şekilde bu efekt olayının kaç kere tekrarlanacağını ayarlamak için kullanılır.

.kutu{
  animation-timing-function:ease;
  animation-iteration-count: 3;
}

Animation-direction (Efekti terse çevirme):

Bu özellik ile olayları terse çevirebiliyoruz. Örneğin animasyon efektimiz soldan sağa gerçekleşiyor ise tam tersini işleyecektir.

.kutu{
animation-direction:alternate-reverse;
}

Animation-delay (Ara verme):

Bu özellik ile animasyonun başlamasını geciktirebiliyoruz. Örneğin animasyonun 2 saniye bekleyip başlaması için şu komutları vereyim.

.kutu{
animation-delay: 2s;
}

Animation-play-state (Animasyonu durdurma):

Bu özellik ile animasyonu bekletme şansımız oluyor. Örneğin üzerine gelince animasyonunun durmasını isteyebiliriz. Bu durumlarda pause özelliği vererek bu durumu gerçekleştiriyoruz.

.kutu{
animation-play-state: pause;
}