WHATSAPP
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 */
}

İlginizi çekebilir...
HTML Nedir? Nasıl Öğrenilir? HTML Nedir? Nasıl Öğrenilir?
HTML Nedir?   HTML (HyperText Markup Language), web sayfalarının veya mobil uygulamaların bölümlerini onları ziyaret eden web tarayıc...
JQuery Nedir? Javascript ile farkları nelerdir? JQuery Nedir? Javascript ile farkları nelerdir?
Bir web geliştiricisinin öğrenmesi gereken ilk programlama dillerinden biri JavaScript'tir. Ancak, JavaScript öğreniyorsa...
Ihlamurdere Eczanesi firmasına yapmış olduğumuz projeyi incelemek istemez misiniz ?