CSS keyframes kullanımı
CSS ile keyframes animasyonları oluşturmak

Birçoğumuzun eli jQuery'nin animate fonksiyonunu kullanmaya çok alışkın ancak CSS3 ile birlikte birçok animasyonu JS kullanmaksızın yalnızca CSS ile yapabilmek mümkün. Bu, elbette biraz daha fazla satır yazmayı gerektiriyor ancak animate ile yaşadığımız performans sorunlarına veda edip çok daha akıcı animasyonlar elde etmek istiyorsak alışmak gerek.

Keyframes kullanımı

CSS ile bir elemente animasyon uygulamak istediğinizde keyframes, elementinizin CSS özelliklerinin, animasyonun hangi aşamasında hangi değerleri alması gerektiğini belirtmenizi sağlar.

/* Chrome, Safari, Opera, Yandex */
@-webkit-keyframes animasyon_ismi {
  0%   { opacity: 0; }
  30%  { opacity: 1;
  100% { opacity: .7; }
}

/* FireFox */
@-moz-keyframes animasyon_ismi {
  0%   { opacity: 0; }
  30%  { opacity: 1;
  100% { opacity: .7; }
}

/* Opera */
@-o-keyframes animasyon_ismi {
  0%   { opacity: 0; }
  30%  { opacity: 1;
  100% { opacity: .7; }
}

/* IE10+, FireFox 29+ */
@keyframes animasyon_ismi {
  0%   { opacity: 0; }
  30%  { opacity: 1;
  100% { opacity: .7; }
}

/* FireFox ve Opera yeni versiyonlarında
** keyframes ve animation için ön ek gerektirmiyor
** eski versiyonları desteklemek istiyorsanız
** ön eklerini kullanabilirsiniz. */

#element {
  -webkit-animation: animasyon_ismi 1s;
          animation: animasyon_ismi 1s;
}

Keyframes animation için özellikler

#element {
 animation-name: animasyon_ismi;
 animation-duration: 1s; /* Animasyonun süresi */
 animation-iteration-count: 3; /* Tekrar sayısı */
 animation-direction: alternate; /* Animasyonun yönü */
 animation-timing-function: ease-out; /* Hareket eğrisi */
 animation-fill-mode: forwards; /* Animasyon sonunda başlangıç (forwards)
                                ** ya da bitiş (backwards) değerleri
                                ** korunsun mu? */
 animation-delay: .5s; /* Animasyon başlamadan önce ne kadar beklesin */
}

/* Elbette tüm bu değerlerin ön ekleri ile de (en azından -webkit-)
** belirtilmesi gereklidir. */

Animation kısa yazım

animation: animasyon_adi 1s .5s 3 alternate forwards

Not: Değerleri birer boşlukla ayırarak yazmanız yeterlidir. Sıra önemli değildir. Bunun tek istisnası duration ve delay değerleridir, eğer her ikisi de kullanılacaksa duration-delay sıralaması ile yazılmalıdır.

Bir örnek

Biraz jQuery, biraz CSS kullanımı ile animasyonlu bir inputbox örneği:

See the Pen animated inputbox by Hakan Ozakar (@hozakar) on CodePen.