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

Sosyal Medya & Dijital Pazarlama Hizmetlerimizi İncelediniz mi?

Pazarlama her zaman kitlenizle doğru yerde ve doğru zamanda bağlantı kurmakla ilgilidir. Bugün, bu, onlarla zaten zaman harcadıkları yerde buluşmanız gerektiği anlamına geliyor: internette.

İlginizi çekebilir...
Wordpress Nedir? Nasıl Kurulur? Wordpress Nedir? Nasıl Kurulur?
WordPress nedir? Özünde, WordPress kendi web sitenizi veya blogunuzu oluşturmanın en basit, en popüler yoludur. Aslında, WordPress inte...
Kapatılan Instagram Hesabı Nasıl Açılır? Kapatılan Instagram Hesabı Nasıl Açılır?
Instagram hesabınızı kurtarmayı açıklamadan önce, bazı genel öğelere bakalım, o zaman Instagram hesabınızı nasıl kolayca kurtarabilec...
Beşiktaş Osmanlı Tulumbacısı firmasına yapmış olduğumuz projeyi incelemek istemez misiniz ?