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

En Çok Okunanlar
Sosyal Medyada Paylaş
İlginizi çekebilir...
2020 Sosyal Medya Trendleri Neler? Fenomen Olmanın İpuçları 2020 Sosyal Medya Trendleri Neler? Fenomen Olmanın İpuçları
Çoğu insanın günlerinin büyük bir bölümünü sosyal medyada geçirdiğini söylemek abartı olmaz. Bug...
MySQL mi? MariaDB mi? Hangisi daha iyi? MySQL mi? MariaDB mi? Hangisi daha iyi?
Veritabanı, tüm önemli site verilerini ve bilgilerini içerdiği için herhangi bir web uygulamasının temel bileşenlerinden birid...
Prodram Özel Web Tasarımı firmasına yapmış olduğumuz projeyi incelemek istemez misiniz ?