Animation timing function

CSS kursu · İleri seviye · Ders 3/52

animation-timing-function ile animasyon eğrisini öğrenirsin.

animation-timing-function nedir?

animation-timing-function animasyonun hız eğrisini belirler. Aynı süre içinde hareketin başta yavaş, ortada hızlı, sonda yavaş olmasını sağlar. Varsayılan ease'tir.

Yaygın değerler: linear (sabit hız), ease-in (yavaş başla), ease-out (yavaş bitir), ease-in-out (iki uçta yavaş). Hareketin doğasına göre seçilir: dönen yükleyici linear, açılan menü ease-out ister.

cubic-bezier ile özel eğri

Önceden tanımlı değerler yetmediğinde cubic-bezier() ile kendi eğrini çizersin. Dört sayı alır: cubic-bezier(0.4, 0, 0.2, 1). İlk ikisi başlangıç eğrisini, son ikileri bitiş eğrisini belirler.

Eğri 0 ile 1 arasında kalır. (0, 0, 1, 1) ile linear aynıdır. Hareketin kişiliğini bu dört sayı belirler; küçük değişiklik büyük fark yaratır.

Uygulama Zil ve yükleyiciye eğri ekle

.loader sürekli döner ve sabit hız istiyor: animation-timing-function: linear. .bell bir kez sallanır ve hareketin sonda yavaşlaması gerek: ease-out. Her iki öğeye animation-timing-function bildirimini ekle.

Örnek çözümü göster

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

/* sallanan zil */
.bell {
  animation-name: swing;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
}

Kendini test et

Sürekli dönen bir yükleyici için en uygun değer?
```
.loader {
  animation-name: spin;
  animation-duration: 1s;
  animation-timing-function: ???;
}
```
- linear
- ease-in
- ease-out
- ease-in-out
Cevabı göster

linear — Doğru. linear sabit hız verir; dönüşte yavaşlama hissi olmaz.

cubic-bezier çağrısını tamamla

.notice {
  animation-timing-function: cubic-bezier(____);
}

Cevabı göster

.notice {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

Zamanlama işlevini davranışıyla eşleştir

linear

Sabit hız
ease-in

Yavaş başla
ease-out

Yavaş bitir
ease-in-out

İki uçta yavaş
cubic-bezier(0, 0, 1, 1) hangi değere eşittir?
```
.notice {
  animation-timing-function: cubic-bezier(0, 0, 1, 1);
}
```
- ease-in
- ease-out
- linear
- ease-in-out
Cevabı göster

linear — Doğru. Bu düz bir çizgidir; sabit hız verir.

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

Animation timing function