Özet - Yükleyici animasyonu
Animasyon özellikleriyle dönen yükleyici kurarsın.
Dönen yükleyici parçaları
Bir dönen yükleyici kurmak için dört parça gerekir: @keyframes spin bölümü, öğeye animation-name: spin bildirimi, animation-duration ile süre ve animation-timing-function: linear ile sabit hız. Sonsuz dönüş için animation-iteration-count: infinite eklenir.
Animasyon bölümünde from ve to adımlarında transform: rotate(...) yazılır. Bu beş bildirim birlikte bir dönen daire kurar.
Uygulama Dönen yükleyiciyi tamamla
spin adında bir @keyframes bölümü yaz: from adımında transform: rotate(0deg), to adımında transform: rotate(360deg). Sonra .loader etiketine şunları ekle: animation-name: spin, animation-duration: 1s, animation-iteration-count: infinite.
Örnek çözümü göster
/* dönen yükleyici */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loader {
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: infinite;
}Kendini test et
-
Animasyon özelliğini rolüyle eşleştir
- animation-name
- @keyframes adını bağlar
- animation-duration
- Bir dönüşün süresi
- animation-timing-function
- Hız eğrisi
- animation-iteration-count
- Tekrar sayısı
-
Sonsuz dönüş için değeri yaz
.loader { animation-name: spin; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: ____; }Cevabı göster
.loader { animation-name: spin; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; } -
Dönen yükleyicide neden linear kullanılır?
.loader { animation-name: spin; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; }- Animasyon daha kısa sürsün
- Dönüşte yavaşlama olmasın
- Animasyon geri oynasın
- Animasyon bir kez oynasın
Cevabı göster
Dönüşte yavaşlama olmasın — Doğru. linear sabit hız verir; dönüş akıcı olur.