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.

Sıradaki ders: Özet - Yükleyici animasyonu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler