Ö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.

Sıradaki ders: Lineer gradyan

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler