CSS ANİMASYONLARI

CSS Animasyonları, web sayfalarında kullanılan HTML etiketleri için hareketli animasyonlar, geçişler ve diğer görsel efektler oluşturmak için kullanılır. Bu özellik sayesinde, sayfa tasarımlarına daha fazla canlılık ve dinamizm katılabilir.

Keyframes özelliği, bir animasyonun nasıl gerçekleşeceğini belirtir. Animation-name özelliği, animasyonun adını belirler. Animation-duration özelliği, animasyonun süresini belirler. Animation-timing-function özelliği, animasyonun hızlılık ve yavaşlığı gibi zamanlama özelliklerini ayarlar. Animation-delay özelliği, animasyonun başlamasını geciktirir.

Aşağıdaki kod blokları, CSS Animasyonları özelliği için bazı örnekler içermektedir:

<div class="animation-example">
  <h1>Bu bir başlık etiketidir</h1>
  <p>Bu bir paragraf etiketidir.</p>
</div>

<div class="transition-example">
  <h2>Bu bir geçiş efekti içeren başlık etiketidir</h2>
  <p>Bu da başka bir paragraf etiketidir.</p>
</div>

.animation-example {
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes move {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0px);
  }
}

.transition-example h2 {
  transition: font-size 1s;
}

.transition-example h2:hover {
  font-size: 36px;
}

Yukarıdaki kod bloklarında, her bir HTML etiketi için farklı CSS stiller tanımlanmıştır. Animation-name özelliği (animation-name) ile animasyonun adını belirlerken, Animation-duration özelliği (animation-duration) ile animasyonun süresi ayarlanmıştır. Animation-timing-function özelliği (animation-timing-function), animasyonun hızlılık ve yavaşlığı gibi zamanlama özelliklerini kontrol ediyor.

Keyframes özelliği ile animasyonun nasıl gerçekleşeceği belirtilir. Bu örnekte, “move” adlı bir animasyon tanımlandı ve 0%, 50%, ve 100% geçiş noktalarında elementin X eksenindeki pozisyonu değiştirildi. Infinite özelliği ile animasyonun sonsuz döngüde çalışması sağlandı.

Transition özelliği (transition) ise CSS Animasyonları’nın daha basit bir alternatifidir. Elementin özelliği (font-size) ve süresi (1s) belirlenir, sonra hover özelliği kullanılarak fare elementin üstünde olduğunda font-size değiştirilir.

Ayrıca, CSS3’te farklı animasyon türleri de kullanılabilir. Bu animasyon türleri sayesinde, elementler döndürülebilir, kaydırılabilir veya devinimli hale getirilebilir.