Penyunting Pelonggaran Cubic-Bézier
Reka lengkung pelonggaran cubic-bezier tersuai dengan penyunting boleh seret dan pratonton animasi langsung.
Seret dua pemegang untuk membentuk lengkung pelonggaran.
transition-timing-function: —;
animation-timing-function: —;
Semuanya berjalan dalam pelayar anda — tiada apa-apa dimuat naik.
Mengenai Penyunting Pelonggaran Cubic-Bézier
Penyunting Easing Cubic-Bézier mereka bentuk fungsi masa tersuai untuk peralihan dan animasi CSS. Seret dua pemegang kawalan pada kanvas lengkung dan nilai cubic-bezier(x1, y1, x2, y2) dikemas kini secara langsung; pratonton animasi memainkan easing itu bersebelahan dengan rujukan linear supaya anda dapat merasai perbezaannya, dengan tempoh boleh laras dan main semula serta-merta.
Sepuluh praset meliputi kosa kata biasa — ease standard, ease-in, ease-out dan ease-in-out, ditambah lengkung ekspresif seperti back dan anticipate yang melepasi titik akhirnya, serta tanjakan gaya material accelerate dan decelerate. Guna sebagaimana adanya atau sebagai titik permulaan untuk diseret menjadi sesuatu yang tersendiri.
Anda juga boleh menaip koordinat titik kawalan yang tepat, tekan rawakkan untuk inspirasi, dan salin sama ada nilai cubic-bezier() semata-mata atau peraturan CSS sedia tampal. Keseluruhan penyunting berjalan dalam pelayar anda.
Cara menggunakan Penyunting Pelonggaran Cubic-Bézier
- Seret dua pemegang pada penyunting lengkung untuk membentuk easing.
- Klik Main Semula dan bandingkan animasi eased dengan rujukan linear, laraskan tempoh jika perlu.
- Cuba praset — ease, back, anticipate, material dan lain-lain — untuk titik permulaan yang pantas.
- Perhalusi dengan input titik kawalan berangka untuk nilai yang tepat.
- Salin nilai cubic-bezier() atau serpihan CSS yang lengkap.