Animasyon anahtar kareleri (keyframes) ne işe yarar ve nasıl çalışırlar?

CSS'de anahtar kareler (keyframes), bir animasyonun ara durumlarını tanımlamak için kullanılır. Bir öğenin özelliklerinin animasyon boyunca farklı zamanlarda nasıl değişeceğini belirlemeye olanak tanır.

Çalışma şekli: belirli yüzdelik zamanlar için stil setleri tanımlarsınız (örneğin, %0, %50, %100) ve tarayıcı bu durumlar arasında değerleri yumuşakça interpolasyon yapar.

Örnek:

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.element {
  animation: fadeIn 2s ease-in-out;
}

Bu örnekte, öğe yumuşakça belirir (saydamlık 0'dan 1'e değişir) ve bu 2 saniye sürer.

Bu şekilde, keyframes karmaşık ve akıcı animasyonlar oluşturmak için stil değişikliklerinin anahtar noktalarını belirlemeye olanak tanır.