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...
Dijital Pazarlama Instagram Reels Nedir? Nasıl Kullanılır?
Instagram, kısa biçim video özelliği olan Reels'ı İngiltere'de kısa süre önce piyasaya sürdü.   Bu özellik, 50'den fazla ülkede uluslara...
Web Yazılım SMTP 554 Hata Kodları ve Açıklamaları
SMTP E-mail gönderimleri sırasında oluşan 554 hata kodları ve açıklamaları aşağıda yer almaktadır. Gönderim sırasında yaşadığınız sorunları buradaki h...
Matris Fuar Standı firmasına yapmış olduğumuz projeyi incelemek istemez misiniz ?