@keyframes kuralı, CSS animasyonlarının temelini oluşturur ve bir elementin zaman içinde stil değişikliklerini belirtir 13.
Nasıl çalışır:
- İsimlendirme: Öncelikle, animasyon için bir isim tanımlanır (örneğin, "bounce") 14.
- Keyframes Tanımlama: Ardından, animasyonun farklı aşamalarını belirten keyframes oluşturulur. Bu aşamalar genellikle 0% ila 100% arasında değer alır 23.
- CSS Özellikleri: Her keyframe, elementin o anki stilini tanımlayan bir dizi CSS özelliği ve değeri içerir 34.
- Animasyonu Uygulama: Son olarak, animasyon özelliği kullanılarak elemente isim, süre, gecikme, tekrar sayısı gibi seçenekler atanır 24.
Bu şekilde, element animasyon boyunca kademeli olarak bir stilden diğerine geçiş yapar 3.
5 kaynaktan alınan bilgiyle göre: