Eğri neyi anlatır?
cubic-bezier() eğrisinde yatay eksen geçen zamanı, dikey eksen tamamlanan yolu gösterir. Eğrinin başlangıcı (0, 0) ve bitişi (1, 1) sabittir; siz yalnızca iki kontrol noktasının yerini belirlersiniz. Eğri dikleştiğinde hareket hızlanır, yatıklaştığında yavaşlar. Yatay değerler 0 ile 1 arasında kalmak zorundadır, çünkü zaman geriye akamaz; dikey değerler ise bu aralığın dışına çıkabilir. Birden büyük bir dikey değer hedefin aşılıp geri dönmesini, sıfırdan küçük bir değer ise hareketin önce ters yönde küçük bir hazırlık yapmasını sağlar.
Hangi eğri nerede kullanılır?
Ekrana giren öğelerde hızlı başlayıp yumuşak duran ease-out ailesi doğru seçimdir; kullanıcı sonucu hemen görür. Ekrandan çıkan öğelerde tersi geçerlidir: ease-in ile yavaş başlayıp hızlanan bir çıkış daha doğal durur. Görünür alanda yer değiştiren öğeler için iki tarafı da yumuşatan ease-in-out uygundur. Süre konusunda ölçü basittir: imleç tepkileri 120–200 ms, panel ve menü açılışları 200–320 ms aralığında kalmalıdır. Aşımlı eğriler dikkat çekicidir ama küçük düğmelerde sinir bozucu olur; bunları yalnızca bir öğe ilk kez göründüğünde kullanın.
Sık yapılan hatalar
Varsayılan zamanlama ease'dir, linear değildir; her şeye doğrusal geçiş vermek arayüzü mekanik gösterir. transition: all yazmak da yaygın bir hatadır: değişmesini beklemediğiniz özellikler de canlanır ve başarım düşer, bunun yerine özellikleri tek tek sayın. Aşımlı eğriler opacity gibi 0–1 aralığına sıkışan özelliklerde beklendiği gibi çalışmaz, çünkü değer sınırın dışına taşamaz — aşımı transform üzerinde kullanın. Zıplama ve yay gibi çok evreli hareketler için ise tek bir kübik eğri yetmez; bunlar için birden fazla anahtar kare ya da linear() zamanlama işlevi gerekir. Son olarak, sisteminde hareket azaltma açık olan kullanıcılar için prefers-reduced-motion sorgusuyla süreyi kısaltmayı unutmayın. Hazır animasyon örneklerini efekt kütüphanesinde bulabilirsiniz.