Timeline_ATTACHMENT

animation-range ile zaman aralığını öğrenirsin.

animation-range nedir?

animation-range özelliği, animasyonun zaman akışındaki başlangıç ve bitiş aralığını belirler. Varsayılan değeri normal'dır; bu, tüm akışı kapsar.

Kaydırma tabanlı animasyonlarda aralık adları ya da yüzdelik değerler kullanırsın. Örneğin animation-range: 0% 50% animasyonu akışın ilk yarısında bitirir; animation-range: entry 0% cover 30% gibi adlandırılmış aralıklar da mümkündür.

Aralık adları: cover, contain, entry, exit

view() akışlarında dört adlandırılmış aralık, öğenin görünürlük aşamalarını tarif eder. entry öğe görünüm alanına girerken, contain öğe tamamen görünürken, exit öğe görünüm alanından çıkarken geçerlidir.

cover ise tüm bu aşamaları kapsar: giriş, tam görünür olma ve çıkış. Bir öğenin baştan sona görünür olduğu süreci tek aralıkla anlatmak istersen cover kullanırsın.

Uygulama Giriş ve çıkış aralığını birleştir

Bir CSS bölümü yaz. Bu bölümde animation-range bildirimi bulunsun ve bu bildirimde hem entry hem de exit anahtar sözcükleri geçsin. Örneğin animation-range: entry 0% exit 100% biçiminde olabilir.

Örnek çözümü göster

/* görünürlük aralığı */
.card {
  animation-range: entry 0% exit 100%;
}

Kendini test et

animation-range özelliği neyi belirler?
- Animasyonun süresini saniye olarak
- Animasyonun yineleme sayısını
- Animasyonun zamanlama işlevini
- Animasyonun zaman akışındaki başlangıç ve bitiş aralığını
Cevabı göster

Animasyonun zaman akışındaki başlangıç ve bitiş aralığını — Doğru. animation-range, animasyonun akıştaki başlangıç ve bitiş aralığını belirler.

Tam görünür olma aralığını yaz

/* öğe tamamen görünürken */
animation-range: ____ 0% 100%;

Cevabı göster

/* öğe tamamen görünürken */
animation-range: contain 0% 100%;

Hangi aralık adı öğenin tüm görünürlük sürecini kapsar?
- cover
- entry
- contain
- exit
Cevabı göster

cover — Doğru. cover aralığı giriş, tam görünür olma ve çıkış aşamalarını tek aralıkta kapsar.
Aralık adını anlamıyla eşleştir

entry

Öğe görünüm alanına girer
contain

Öğe tamamen görünür durumdadır
exit

Öğe görünüm alanından çıkar
cover

Tüm görünürlük sürecini kapsar

Sıradaki ders: Scroll-snap

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler