Animation-name ve duration

CSS kursu · İleri seviye · Ders 2/52

animation-name ve animation-duration özelliklerini öğrenirsin.

animation-name ve duration

@keyframes tek başına hiçbir şey yapmaz; bir öğeye bağlanmalıdır. animation-name özelliği @keyframes adını öğeye yazar: animation-name: spin;. animation-duration ise animasyonun ne kadar süreceğini belirler: animation-duration: 2s;.

Süre verilmezse varsayılan 0s'dir; yani animasyon hiç oynamaz. Bu yüzden iki özellik birlikte yazılır. Saniye (s) veya milisaniye (ms) kullanılabilir.

Gerçek örnekler: yükleyici ve banner

Gerçek örnekler: bir .loader etiketi sürekli döner (animation-name: spin; animation-duration: 1s;). Bir .banner etiketi kayar (animation-name: slide; animation-duration: 8s;). Kısa süreler hızlı, uzun süreler yavaştır.

Süreyi kullanıcının fark edebileceği kadar uzun tut. 200 ms çok kısa, 5 saniye uzun sayılır. Hareketin amacına göre seç.

Uygulama Yükleyici ve banner'ı bağla

.loader etiketi spin animasyonunu oynasın ve bir dönüşü 1s sürsün. .banner etiketi slide animasyonunu oynasın ve 8s sürsün. Her iki öğeye animation-name ve animation-duration bildirimlerini ekle.

Örnek çözümü göster

/* dönen yükleyici */
.loader {
  animation-name: spin;
  animation-duration: 1s;
}

/* kayan banner */
.banner {
  animation-name: slide;
  animation-duration: 8s;
}

Kendini test et

Süreyi yaz

.notice {
  animation-name: pulse;
  animation-duration: ____;
}

Cevabı göster

.notice {
  animation-name: pulse;
  animation-duration: 2s;
}

animation-duration verilmezse ne olur?
```
.notice {
  animation-name: pulse;
}
```
- Animasyon hiç oynamaz
- Animasyon anında biter
- Animasyon sonsuz döner
- Animasyon 1 saniye sürer
Cevabı göster

Animasyon hiç oynamaz — Doğru. Varsayılan süre 0s'dir; animasyon görünmez.
Özelliği veya birimi rolüyle eşleştir

animation-name

@keyframes adını bağlar
animation-duration

Animasyonun süresi
2s

İki saniye
500ms

Yarım saniye
Bir bildirim nabzı için en uygun süre hangisi?
```
.notice {
  animation-name: pulse;
  animation-duration: ???;
}
```
- 0ms
- 10s
- 100s
- 1s
Cevabı göster

1s — Doğru. 1 saniye nabız için doğal bir hızdır.

İleri seviye bölümündeki tüm dersler

Animation-name ve duration