KakaoTalk içinde oturum açma ve dosya kaydetme engellidir. Tüm özellikleri kullanmak için sayfayı Safari ile açın.
LINE içinde oturum açma ve dosya kaydetme engellidir. Tüm özellikleri kullanmak için sayfayı Safari ile açın.
Menü (⋯) düğmesine dokunup bu sayfayı Safari veya Chrome'da açın. Oturumu orada açabilirsiniz.
Bir animasyonun hız eğrisini göz kararı şekillendirin, cubic-bezier CSS'ini kopyalayın.
Önizleme
CSS
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Onu kendiniz şekillendirmek için P1 ve P2 tutamaçlarını da sürükleyebilirsiniz.
Bir eğri şekillendirin, Çalıştır'a basın, burada birikir.
Tarayıcının hazır ease-out'u tam istediğiniz gibi olmadığında, yavaşlamayı tam istediğiniz şekilde şekillendirmek için tutamaçları kendiniz sürükleyin. P2'yi sol üste doğru çekin, keskin bir ilk hareket alıp yumuşak bir durmaya yerleşen bir hareket elde edin — bir anahtar kelime listesinden seçmekten çok daha hassas ayarlanmış.
Değerlerin 0-1 aralığının dışına taştığı elastik hazır ayar gibi bir eğri kullanın, hareket hedefini aşıp geri yerleşir — sıçrayan bir giriş. Sert ve mekanik hissettirmemesi gereken modallar veya toast bildirimleri için iyi.
Framer veya After Effects gibi bir araç size zaten P1/P2 koordinatları verdiyse, sürüklemeyi atlayın ve aynı eğriyi CSS'te tam olarak yeniden oluşturmak için o sayıları doğrudan girdi alanlarına yazın.
Başlangıç noktası olarak bir hazır ayar seçin, veya eğriyi doğrudan düzenlemeye başlayın.
Eğri üzerindeki P1 ve P2 tutamaçlarını sürükleyin, veya yanındaki sayı alanlarına doğrudan koordinat yazın.
Önizleme topunu hareket ettirip gerçek hareketi görmek için oynat düğmesine basın.
Sonucu oluşturmak için Çalıştır'a tıklayın, sonra CSS'i kopyalayın veya kitaplığınıza indirin/kaydedin.
cubic-bezier() yalnızca zaman ekseni 0 ile 1 arasında kaldığında geçerli bir değer sayılır, bu yüzden bu düzenleyicide bir tutamacı ne kadar yana sürüklerseniz sürükleyin, daha ileri gitmek yerine tuval kenarında durur.
Zamanı değil ilerlemeyi temsil eden Y değerleri burada -0,9 ile 1,9 arasında salınabilir — elastik hazır ayarın hedefini aşıp geri yerleşmesini sağlayan budur. CSS spesifikasyonu Y'ye bir sınır koymaz, yalnızca X'e koyar.
Önizleme alternatif yönle döngüye girer, bu yüzden tam yumuşatmanızı ileriye doğru oynatır, sonra dönüş bacağı için aynı yumuşatmayı yine ileriye doğru oynatır — eğrinin ters çevrilmiş bir versiyonu değil. Yalnızca bir yönle ilgileniyorsanız, oynat'a basın ve geri sekmeyi değil ilk geçişi değerlendirin.