Animation direction ve fill-mode
animation-direction ve animation-fill-mode özelliklerini öğrenirsin.
animation-direction nedir?
animation-direction animasyonun oynama yönünü belirler. Varsayılan normal'dir: baştan sona doğru oynar. reverse tersten oynatır; son adım başa, ilk adım sona gelir.
alternate ise birinci turu ileri, ikinci turu geri oynatır. Sürekli döngülerde ileri-geri hareket verir; alternate-reverse de tersiyle başlar. Bir sallanan zil, ileri-geri hareketi alternate ile kurar.
animation-fill-mode nedir?
animation-fill-mode animasyon başlamadan önce ve bittikten sonra öğenin hangi durumda kalacağını belirler. Varsayılan none'dır; öğe orijinal durumuna döner.
forwards ile animasyon bittiğinde son adımda kalır; backwards ile başlamadan önce ilk adımı uygular; both ikisini birden yapar. Bir menü açıldıktan sonra açık kalması için forwards kullanılır.
Uygulama Zil ve menüye yön ve kalma ekle
.bell sallanırken ileri-geri hareket etsin: animation-direction: alternate. .menu açıldıktan sonra açık kalsın: animation-fill-mode: forwards. İki bildirimi de ilgili öğeye ekle.
Örnek çözümü göster
/* sallanan zil */
.bell {
animation-name: swing;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* açılan menü */
.menu {
animation-name: open;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}Kendini test et
-
İleri-geri sallanan bir zil için hangi yön?
.bell { animation-name: swing; animation-duration: 0.6s; animation-iteration-count: infinite; animation-direction: ???; }- normal
- alternate
- reverse
- alternate-reverse
Cevabı göster
alternate — Doğru. alternate bir tur ileri, bir tur geri oynatır.
-
Son durumda bırak
.menu { animation-name: open; animation-fill-mode: ____; }Cevabı göster
.menu { animation-name: open; animation-fill-mode: forwards; } -
Değeri davranışıyla eşleştir
- normal
- Baştan sona
- reverse
- Sondan başa
- alternate
- İleri-geri döngü
- forwards
- Sonda kal
-
animation-fill-mode: forwards ne yapar?
.menu { animation-name: open; animation-duration: 0.4s; animation-fill-mode: forwards; }- Animasyon bittiğinde son adımda kalır
- Animasyonu yavaşlatır
- Animasyonu geri oynatır
- Animasyonu tekrarlar
Cevabı göster
Animasyon bittiğinde son adımda kalır — Doğru. forwards son adımı dondurur.