Keyframes ne işe yarar ve nasıl çalışırlar?

@keyframes — CSS kuralı, animasyonun anahtar karelerini tanımlar. Bu, bir öğenin farklı zamanlardaki durumlarının bir dizisini oluşturmaya olanak tanır ve tarayıcı bunları düzgün bir şekilde geçiştirerek hareket efekti yaratır. Belirli yüzde oranlarındaki (0% ile 100%) veya from (0%) ve to (100%) anahtar kelimeleri kullanılarak stil setleri tanımlanır.

keyframes kullanmak için:

1. Benzersiz bir isimle @keyframes kuralını tanımlayın.
2. @keyframes içinde, farklı zaman noktaları için stiller belirtin (yüzdeler veya from/to).
3. Oluşturulan animasyonu CSS animation özelliği ile öğeye uygulayın.

@keyframes slidein {
  from {
    transform: translateX(0%); // Başlangıç durumu: X ekseninde hareket yok
  }

  to {
    transform: translateX(100%); // Bitiş durumu: X ekseninde %100 hareket
  }
}

.element {
  animation-name: slidein; // Yukarıda tanımlanan animasyonun adı
  animation-duration: 3s; // Animasyon süresi
  animation-timing-function: ease-in-out; // Animasyon hız fonksiyonu
  animation-delay: 1s; // Animasyon başlamadan önce gecikme
  animation-iteration-count: infinite; // Tekrar sayısı (burada sonsuz)
  animation-direction: alternate; // Animasyon yönü (düz, sonra ters)
}

@keyframes ile birlikte kullanılan temel animation özellikleri:

Özellik	Açıklama
animation-name	Uygulanacak @keyframes adı.
animation-duration	Bir animasyon döngüsünün süresi (örneğin, 2s, 500ms).
animation-timing-function	Animasyon hız fonksiyonu (örneğin, linear, ease, ease-in, cubic-bezier).
animation-delay	Animasyon başlamadan önce gecikme (örneğin, 1s).
animation-iteration-count	Animasyon tekrar sayısı (infinite sonsuz tekrar için).
animation-direction	Animasyon yönü (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Animasyon öncesi ve sonrası hangi stillerin uygulanacağını belirler.
animation-play-state	Animasyonun çalışıp çalışmadığını belirler (durdurma veya devam).