Timing function
transition-timing-function ile geçiş eğrisini öğrenirsin.
transition-timing-function
transition-timing-function, geçişin hız eğrisini söyler. İki değer arasındaki değişim sabit hızla mı, başta yavaş sonda hızlı mı, yoksa önce hızlı sonra yavaş mı olacak diye seçersin.
Üç yaygın değer: ease (varsayılan; başta hızlı, sonda yavaş), linear (düz çizgi, sabit hız) ve ease-in-out (başta ve sonda yavaş, ortada hızlı).
Üç eğrinin karakteri
Üç eğrinin karakteri farklıdır. ease başta hızlı başlayıp sonda yavaşlar; hareketin doğal durduğunu hissettirir. linear sabit hızdadır; robotik ama düz.
ease-in-out hem başta hem sonda yavaş, ortada hızlıdır; en dengeli seçimdir. Düğmeler ve kartlar için çoğunlukla bu değer seçilir; çünkü dengeyi iyi kurar.
İlaç kapsülü etiketi
Bir ilaç kapsülü şeklindeki .pill etiketi hover'da renk değiştirsin. ease-in-out ile baş ve son yavaş, orta hızlı bir geçiş verirsin; hareket ne sert ne de sönük hissedilir.
Arayüz bileşenlerinde ease ve ease-in-out en sık tercih edilen eğrilerdir. linear daha çok ilerleme çubukları gibi sabit hız gereken yerlerde kullanılır.
Uygulama Pill etiketine zamanlama eğrisi ekle
.pill öğesine transition-timing-function: ease-in-out bildirimini ekle. .pill:hover durumu için background-color: teal tanımla. Böylece hover'da renk baş ve son yavaş, orta hızlı bir eğriyle akar.
Örnek çözümü göster
.pill {
background-color: #e5e7eb;
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
.pill:hover {
background-color: teal;
}Kendini test et
-
Hangi değer sabit hızlı, düz bir geçiş verir?
.bar { transition-timing-function: linear; }- ease
- linear
- ease-in-out
Cevabı göster
linear — Doğru. linear, geçiş boyunca sabit hızlı düz bir eğri çizer.
-
Dengeli eğriyi seç
.pill { transition-property: background-color; transition-duration: 0.3s; transition-timing-function: ____; }Cevabı göster
.pill { transition-property: background-color; transition-duration: 0.3s; transition-timing-function: ease-in-out; } -
Eğriyi karakteriyle eşleştir
- ease
- Başta hızlı, sonda yavaş
- linear
- Sabit hız, düz çizgi
- ease-in-out
- Baş ve son yavaş, orta hızlı