Türkçe
Canlı animasyon önizlemesi ile özel CSS easing eğrileri çiz.
Son güncelleme
.element {
transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}CSS'te *easing fonksiyonu*, bir animasyonun süresi boyunca nasıl hızlandığını ve yavaşladığını belirler. ease, ease-in, ease-out ve ease-in-out anahtar kelimeleri dört belirli eğrinin kısayoludur. Bu dördünün ötesinde ne istersen cubic-bezier() ile yaparsın - dört sayıyla özgün eğri çizen fonksiyon.
Bu dört sayı, iki kontrol noktasının (x1, y1, x2, y2) koordinatlarıdır. Elle yazmak zor; küçük değişiklikler büyük görsel farklara yol açar ve küçük taşmalar *zıplayan* bir hareket üretir - bunu sadece sayılara bakarak hissedemezsin. Görsel editör, tutamağı çekip eğrinin tepkisini anında görmeni sağlar; ondalıkları kurcalamaktan çok daha hızlıdır.
Coddy editörü eğriyi canlı çizer, önizleme topunu seçtiğin easing ile hareket ettirir ve sık karşılaşılan kalıplar için hazır şablonlar sunar: CSS anahtar kelimeleri, Material Design *standard*, bouncy out ve anticipate–overshoot. Üretilen cubic-bezier() dizesini kopyala ve CSS'ine yapıştır - her şey tarayıcıda çalışır.
linear'dır - birim zamanda eşit ilerleme.Hedeflediğin hisse yakın bir hazır ayar seç. *Material standard* ve *Bouncy out* UI için iyi başlangıçlardır; *ease-out* giriş animasyonları için güvenli varsayılandır.
Renkli noktalar iki kontrol noktasıdır. Birincisini animasyonun *başlangıcını*, ikincisini *bitişini* ayarlamak için sürükle. Tutamağı tuvalin üst sınırı üzerine çekersen overshoot oluşur.
Gerçek senaryona uyan bir süre yaz. UI geçişleri 150–300ms, vurgu hareketleri 400–600ms civarıdır. *Replay* önizlemeyi yeni süreyle tekrar oynatır.
Daha kesin değerler için X1/Y1/X2/Y2 alanlarına yaz. Y, 0..1'in dışına çıkabilir; X her zaman 0..1 içinde kalır.
*Kopyala* ile tam transition kuralını al. Stil dosyana yapıştır ve transform yerine animasyonladığın özelliği yaz.
Sık kullanılan easing'ler ve arkasındaki cubic-bezier değerleri. Dört anahtar kelime de belirli eğrilerin takma adıdır.
| Easing | cubic-bezier değerleri | Ne zaman kullanılır |
|---|---|---|
ease | (0.25, 0.1, 0.25, 1) | transition varsayılanı - yumuşak ama jenerik |
linear | (0, 0, 1, 1) | Sabit hız - UI için genelde yanlış, spinner için doğru |
ease-in | (0.42, 0, 1, 1) | Yavaş başla, hızlı bitir - çıkışlar için en uygun |
ease-out | (0, 0, 0.58, 1) | Hızlı başla, yavaş bitir - girişler ve tepkiler için en uygun |
ease-in-out | (0.42, 0, 0.58, 1) | Simetrik - gidip gelen geçişler için iyi |
| Material standard | (0.4, 0, 0.2, 1) | Çevik modern UI hareketi |
| Bouncy out | (0.18, 0.89, 0.32, 1.28) | Aşıp yerine oturur - eğlenceli girişler |
.btn { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover { transform: translateY(-2px);}Yükselme erken ve hızlı olur, sonra yumuşakça yerine oturur - sürtünmesiz, imleç hareketine yanıt veriyor gibi hissettirir.
.card { transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}Y2 değeri 1.28 olduğundan eğri hedefi geçer ve geri döner. Az kullan - her yerde zıplamak hızlı yorar.
.hero { transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}Negatif Y1, animasyonun kısa bir an *ters* yöne gitmesini sağlar. Klasik animasyondan ödünç alınmış bir teknik - küçük anticipate ana hareketi bilinçli gösterir.
ease-in kullanmak. Yavaş başlar, hızlı biter - duyarlı hissettiren her şeyin tersi. Bunun yerine ease-out kullan.linear seçmek. Sabit hız mekanik görünür; progress bar ve spinner için doğru, başka pek bir yerde değil.cubic-bezier() içindeki dört sayı ne anlama gelir?cubic-bezier(x1, y1, x2, y2). İlk nokta animasyonun *başlangıcını*, ikinci nokta *bitişini* şekillendirir. X her zaman 0..1 (zaman); Y, overshoot/anticipate efektleri için 0..1 dışına çıkabilir (ilerleme).cubic-bezier(0.4, 0, 0.2, 1). Çıkışlar için *ease-in* uygun. İlerleme dışında *linear* genellikle yanlıştır.ease ile ease-out arasındaki fark nedir?ease aynı zamanda yumuşak başlar. ease-out tam hızla başlar ve yavaşlar - bu *anında hareket* hissi ease'den daha duyarlı görünmesini sağlar.cubic-bezier(0.18, 0.89, 0.32, 1.28) hedefi ~%28 geçip yerine oturur. Birden fazla zıplama için @keyframes ya da spring kütüphanesi gerekir - cubic-bezier yalnızca bir kez overshoot yapabilir.@keyframes ile birlikte kullanabilir miyim?animation-timing-function olarak veya animation kısayolunda kullan; keyframe başına da uygulayabilirsin. Karmaşık çok aşamalı hareketlerde her keyframe çifti arasına farklı easing koyabilirsin.