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