Nombor Nyata Di Sebalik CSS mudah masuk
Reka fungsi pemasaan CSS cubic-bezier() tersuai dengan menyeret dua titik kawalan, pratonton secara langsung terhadap rujukan linear, kemudian salin nilai sedia.
Hasilnya
Halaman ini membuka penjana cubic-bezier dengan x1=0.42, y1=0, x2=0.58, y2=1 sudah dimuatkan — kawalan tepat menunjukkan kata kunci mudah-masuk CSS berkembang ke. Seret sama ada pemegang, atau edit nombor secara terus, dan lengkung, pratonton animasi dan rentetan boleh salin semuanya dikemas kini dengan serta-merta.
ease-in-out ialah salah satu daripada lima kata kunci pemasaan CSS terbina dalam, dan ia popular dengan tepat kerana lengkung ini memecut perlahan-lahan dari permulaan, memegang rentak yang agak sekata melalui bahagian tengah dan merendahkan kembali sebelum tamat — bentuk yang berbunyi semula jadi untuk kebanyakan gerakan UI. Melihatnya sebagai titik kawalan eksplisit dan bukannya nama kata kunci menjadikannya jelas sebabnya: y1 duduk berhampiran 0 dan y2 duduk berhampiran 1, kedua-duanya hampir dengan padanan x, jadi tiada overshoot dalam kedua-dua arah.
Gunakan empat nombor ini sebagai titik permulaan dan bukannya kata kunci itu sendiri apabila anda perlu menyenggol sedikit rasa — tarik x1 ke bawah untuk permulaan yang lebih pantas, atau tolak y2 di atas 1 untuk menukar bentuk yang sama ini menjadi overshoot lembut. Setiap perubahan mengemas kini pratonton dan baris cubic-bezier() yang boleh disalin serta-merta.