Penjana CSS Cubic Bezier
Seret dua pemegang untuk membentuk keluk pelonggaran, lihat titik bergerak melaluinya berbanding keluk yang stabil, dan salin nilai cubic-bezier().
cubic-bezier(0.25, 0.1, 0.25, 1)Keluk dilukis terus dalam penyemak imbas anda. Tiada apa-apa yang anda tetapkan di sini akan dimuat naik ke BroBroGo.
Soalan Lazim
Apakah maksud dua pemegang dan empat nombor tersebut?
Keluk bermula dari bawah-kiri (permulaan) ke atas-kanan (penghujung), dengan masa berjalan dari kiri ke kanan dan kemajuan bergerak ke atas. Dua pemegang ialah titik kawalan yang membengkokkannya — masing-masing mempunyai X dan Y, jadi bersama-sama ia adalah cubic-bezier(x1, y1, x2, y2). X kekal antara 0 dan 1, manakala Y boleh pergi ke atas bahagian atas atau di bawah bahagian bawah untuk membuat gerakan melampaui had atau menarik balik sebelum ia menetap.
Bagaimanakah cara saya menggunakan nilai tersebut dalam CSS saya?
Salin cubic-bezier() dan letakkan di mana-mana sahaja fungsi pemasaan digunakan — transition-timing-function, animation-timing-function, atau trengkas, cth. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Kata kunci ease, ease-in, ease-out dan ease-in-out hanyalah keluk cubic-bezier tetap, jadi memilih salah satu daripada pratetap tersebut menunjukkan nilai tepat di sebalik kata kunci tersebut.
Bolehkah ia membuat kesan lantunan atau elastik?
Tidak secara bersendirian. Satu cubic-bezier boleh menjangka dan melampaui had (overshoot) — pratetap "back" menarik satu pemegang melepasi kotak untuk melakukan perkara itu — tetapi ia hanya boleh bergerak satu arah dan kemudian menetap. Lantunan (bounce) dan elastik membalikkan arah beberapa kali, yang tidak dapat dinyatakan oleh satu cubic-bezier; itu memerlukan bingkai utama CSS atau fungsi linear() dengan banyak hentian.