CSS animasyonları kullanmak için aşağıdaki adımlar izlenir:
- Keyframes Tanımlama:
@keyframes
kuralı kullanılarak animasyonun her bir aşaması için keyframes tanımlanır 13. Bu kural, animasyonun adını ve stillerin zaman içindeki değişimini içerir 3. - Elemente Animasyonu Bağlama: Animasyon,
animation
özelliği ile bir elemente bağlanır 13. Bu özellik, animasyonun adını, süresini, gecikme süresini, tekrar sayısını ve diğer ayarları içerir 13.
Örnek kullanım:
/* Keyframes */ @keyframes example { from { background-color: red; } to { background-color: yellow; } } /* Elemente Animasyonu Bağlama */ div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; }
Ek Özellikler:
5 kaynaktan alınan bilgiyle göre: