CSS Keyframes Nedir? CSS Animasyon Nasıl Kullanılır?

CSS Keyframes Nedir? CSS Animasyon Nasıl Kullanılır?

Bir çok web geliştiricisi jquery animate fonksiyonunu kullanıyor. Fakat CSS3 ile birlikte birçok animasyonu yalnızca CSS ile yapabilmek mümkün hale geldi. Bu avantaj tabiki, biraz daha fazla satır kod yazmayı gerektiriyor ancak animate ile yaşadığımız performans sorunlarına karşılaşmayıp çok daha akıcı animasyonlar elde edebiliyoruz.

CSS Keyframes kullanımı

CSS ile bir elemente animasyon uygulamak istiyorsanız keyframes, elementinizin CSS özelliklerinin, animasyonun hangi aşamasında hangi değerleri alması gerektiğini bildirmenizi sağlamaktadır.

@-webkit-keyframes berkeajans_css_animasyonu {

  0%   { opacity: 0; }

  30%  { opacity: 1;

  100% { opacity: .7; }

}

#element {

  -webkit-animation: berkeajans_css_animasyonu 1s;

          animation: berkeajans_css_animasyonu 1s;

}

/* Tarayıcı problemi yaşamamanız için */

/* Firefox */

@-moz-keyframes berkeajans_css_animasyonu {

  0%   { opacity: 0; }

  30%  { opacity: 1;

  100% { opacity: .7; }

}

/* Opera */

@-o-keyframes berkeajans_css_animasyonu {

  0%   { opacity: 0; }

  30%  { opacity: 1;

  100% { opacity: .7; }

}

/* IE10+ */

@keyframes berkeajans_css_animasyonu {

  0%   { opacity: 0; }

  30%  { opacity: 1;

  100% { opacity: .7; }

}


Keyframes animation özellikleri

#element {
 animation-name: berkeajans_css_animasyonu;
 animation-duration: 1s; /* Animasyonun süresi */
 animation-iteration-count: 3; /* Kaç kez tekrar etsin */
 animation-direction: alternate; /* Animasyonun gerçekleşeceği yön */
 animation-timing-function: ease-out; /* Hareket eğrisi */
 animation-fill-mode: forwards; /* Animasyon sonunda başlangıç (forwards)
 animation-delay: .5s; /* Animasyon başlamadan önce beklenmesi gereken süre */
}

Çok Okunanlar

İLGİNİZİ ÇEKEBİLİR!