CSS animasyon kodları aşağıdaki ana özelliklerden oluşur:
- @keyframes: Animasyonun kademelerini ve stil değişikliklerini tanımlar 13. Kullanımı:
@keyframes animasyon_adı { from { css_kodları_başlangıç; } to { css_kodları_bitiş; } }3. - animation-name: Animasyonun adını belirtir ve HTML öğesine uygulanır 14. Kullanımı:
element { animation-name: animasyon_adı; }4. - animation-duration: Animasyonun ne kadar sürede tamamlanacağını tanımlar 13. Varsayılan değer 0'dır 3. Kullanımı:
animation-duration: süre_değeri;
4. - animation-delay: Animasyonun başlamasından önce gecikme süresini belirtir 13. Kullanımı:
animation-delay: gecikme_değeri;
4. - animation-iteration-count: Animasyonun kaç kez tekrar edeceğini belirler 13. Kullanımı:
animation-iteration-count: tekrar_sayısı;
4. - animation-direction: Animasyonun ileri, geri veya alternatif döngülerde oynatılacağını belirtir 13. Değerleri:
normal
,reverse
,alternate
,alternate-reverse
4. - animation-timing-function: Animasyonun zamanlama işlevini tanımlar 13. Değerleri:
ease
,linear
,ease-in
,ease-out
,ease-in-out
4. - animation-fill-mode: Animasyon durduğunda veya başlamadan önceki durumu belirler 13. Değerleri:
none
,forwards
,backwards
,both
3.
5 kaynaktan alınan bilgiyle göre: