Generator Cubic Bezier CSS

Apa itu cubic-bezier?

CSS cubic-bezier() mendefinisikan fungsi waktu kustom untuk transisi dan animasi CSS. Empat angka mengontrol dua titik dari kurva Bézier, memungkinkan penyesuaian halus dari ease-in hingga efek seperti pantulan.

Kurva Bézier: Garis Keturunan Matematis

Kurva-kurva ini dinamai dari Pierre Bézier, insinyur Prancis di Renault yang menggunakannya pada 1960-an untuk merancang panel bodi mulus Renault 16: diterbitkan pada 1968 sebagai bagian dari sistem CAD UNISURF Renault. Matematikanya telah dikembangkan secara independen beberapa tahun sebelumnya (1959) oleh Paul de Casteljau di Citroën, tetapi Citroën menjaga karya de Casteljau sebagai rahasia dagang dan versi yang diterbitkan Bézier menjadi referensi kanonis. Kedua orang itu menyatu pada keluarga kurva polinomial yang sama yang didefinisikan oleh titik kontrol: algoritma de Casteljau untuk mengevaluasi kurva Bézier pada parameter tertentu dinamai dari pelopor yang tidak diterbitkan. Kurva Bézier kubik menjadi primitif universal grafik vektor karena murah untuk dievaluasi (beberapa perkalian dan penambahan), dapat diskalakan secara sepele (matematikanya invarian di bawah transformasi affine), dan dapat dikontrol secara lokal (memindahkan titik kontrol hanya mengubah segmen kurva di dekatnya). Adobe PostScript (1984) dan PDF, spesifikasi SVG (W3C Recommendation September 2001), dan setiap format font modern menggunakan kurva Bézier kubik sebagai blok bangunan untuk bentuk huruf, ikon, dan ilustrasi. CSS mengadopsi tipe kurva yang sama untuk timing animasi: meminjam primitif matematis standar dunia desain visual untuk kasus penggunaan baru menggambarkan gerakan.

Spesifikasi Animasi CSS dan Fungsi Timing

Animasi dan transisi CSS keduanya menggunakan keluarga fungsi timing yang sama. Spesifikasi CSS Animations Level 1 pertama kali diterbitkan sebagai Working Draft publik pada Maret 2009 (diekstraksi dari implementasi WebKit-prefixed sebelumnya) dan terus dipelihara oleh W3C CSS Working Group. Modul CSS Easing Functions Level 1 memformalkan sintaks fungsi-timing dan saat ini merupakan Candidate Recommendation. Lima keyword bernama adalah alias untuk cubic-beziers tertentu: ease = cubic-bezier(0.25, 0.1, 0.25, 1): default CSS untuk transisi, dengan awal cepat dan akhir lambat yang terasa alami untuk sebagian besar gerakan UI. ease-in = cubic-bezier(0.42, 0, 1, 1): dimulai lambat, berakselerasi ke akhir yang cepat. ease-out = cubic-bezier(0, 0, 0.58, 1): awal cepat, melambat ke akhir lambat; ini umumnya easing yang paling banyak digunakan untuk elemen UI yang masuk ke viewport. ease-in-out = cubic-bezier(0.42, 0, 0.58, 1): kurva-S simetris, lambat di kedua ujung. linear = cubic-bezier(0, 0, 1, 1): tanpa easing, laju konstan; jarang menjadi pilihan yang tepat untuk UI tetapi sesuai untuk animasi looping kontinu seperti spinner. CSS juga menawarkan dua opsi timing non-Bézier: steps(n, jumpterm) untuk animasi bertahap (frame-demi-frame), dan linear() (ditambahkan di CSS Easing Level 2) untuk fungsi linear-bertahap yang mendekati kurva apa pun.

Kurva Easing Sistem Desain

Sistem desain utama menerbitkan kurva easing berpendapat yang menggantikan default CSS. Google Material Design menentukan "easing standar" sebagai cubic-bezier(0.4, 0, 0.2, 1): akselerasi cepat, deselerasi lambat, digunakan untuk sebagian besar transisi UI di Android dan pustaka Material web; "easing decelerated" cubic-bezier(0, 0, 0.2, 1) untuk elemen yang masuk ke layar; "easing accelerated" cubic-bezier(0.4, 0, 1, 1) untuk elemen yang keluar. Apple's Human Interface Guidelines menekankan animasi spring-physics daripada kurva Bézier tetap, tetapi UIKit iOS mengirim cubic-bezier default sekitar (0.25, 0.1, 0.25, 1) (sama dengan CSS ease). Carbon Design System IBM menggunakan cubic-bezier(0.5, 0, 0.1, 1) untuk kategori productive-motion-nya. Microsoft Fluent, Atlassian, Salesforce Lightning semua menentukan kurva mereka sendiri. Persamaan easing Robert Penner (diterbitkan pada 2001 sebagai bagian dari bukunya tentang gerakan Flash) mendefinisikan kosakata kurva-bernama yang digunakan hampir setiap pustaka animasi: easeInQuad, easeOutCubic, easeInOutSine, easeInQuart, easeOutBack, easeInOutBounce, easeInElastic. Sebagian besar dapat diekspresikan sebagai cubic-bezier; varian elastic dan bounce tidak (mereka memerlukan fungsi linear-bertahap multi-bagian karena mereka berosilasi).

Memilih Kurva yang Tepat untuk Pekerjaan

• Elemen yang masuk ke viewport (modal muncul, kartu meluncur masuk, dropdown terbuka): gunakan ease-out atau kurva yang dideselerasi seperti Material's cubic-bezier(0, 0, 0.2, 1). Elemen melambat saat tiba, yang terasa seperti "menetap di tempatnya."
• Elemen yang meninggalkan viewport (modal menutup, kartu meluncur keluar): gunakan ease-in atau kurva yang diakselerasi. Elemen berakselerasi saat berangkat, terasa seperti pergi dengan niat.
• Animasi kontinu (loader, progress bar, gerakan ambient): gunakan linear. Easing membuat gerakan kontinu terasa tersentak-sentak; kecepatan konstan terbaca sebagai stabil.
• Status hover dan tekan tombol: durasi singkat (100-150ms) dengan ease-out untuk hover-in dan ease-in atau tanpa easing untuk hover-out. Umpan balik tombol harus terasa cepat.
• Gerakan emfatik yang memerlukan kepribadian (notifikasi toast, indikator sukses): gunakan kurva sedikit overshooting seperti cubic-bezier(0.34, 1.56, 0.64, 1) untuk pantulan halus yang menandakan "sesuatu yang menarik baru saja terjadi" tanpa menjengkelkan.
• Animasi yang lebih panjang (lebih dari 500ms): gunakan ease-in-out atau kurva-S serupa. Animasi panjang dengan easing satu sisi terasa seperti memiliki awal atau akhir berbentuk-salah.

Pertimbangan Kinerja

Fungsi timing cubic-bezier kustom pada dasarnya tidak berbiaya saat runtime: kurva adalah konstanta, browser pra-menghitung tabel pencarian sekali, dan evaluasi per-frame adalah beberapa operasi floating-point. Pertanyaan kinerja adalah properti apa yang Anda animasikan, bukan kurva timing. Menganimasikan transform (translate, scale, rotate) dan opacity menggunakan compositing GPU dan tetap mulus pada 60 atau 120fps bahkan pada hardware kelas menengah. Menganimasikan top, left, width, height, margin, padding, atau properti apa pun yang memicu layout akan tersendat pada apa pun selain halaman paling sederhana karena setiap frame memicu reflow penuh. Daftar properti "compositor-friendly" (transform + opacity, plus filter dan beberapa lainnya) adalah set aman yang biasa; semua yang lain perlu diuji di bawah pemuatan halaman aktual. Properti CSS will-change menunjukkan kepada browser bahwa properti akan dianimasikan, memungkinkannya pra-mempromosikan elemen ke lapisan compositing-nya sendiri; gunakan dengan hemat karena setiap will-change memesan memori GPU.

Aksesibilitas: prefers-reduced-motion

Minoritas yang berarti dari pengguna: mereka dengan gangguan vestibular, kondisi defisit-perhatian, atau preferensi pribadi sederhana: menemukan desain gerakan mengganggu atau secara aktif tidak nyaman. Spesifikasi CSS Media Queries Level 5 mendefinisikan fitur media prefers-reduced-motion, diekspos sebagai pengaturan sistem di macOS (System Settings → Accessibility → Display → Reduce Motion), Windows 10+ (Settings → Ease of Access → Display), iOS, Android, dan sebagian besar desktop Linux utama. Konvensi sejak sekitar 2019: bungkus animasi non-esensial apa pun dalam @media (prefers-reduced-motion: no-preference) { ... } atau balikkan dengan @media (prefers-reduced-motion: reduce) { transition: none !important; animation: none !important; }. Pilihan kurva cubic-bezier tidak penting untuk ini: spesifikasi meminta pengembang untuk menonaktifkan atau memperpendek secara substansial animasi ketika pengguna telah menyatakan preferensinya. Dokumentasi sistem desain modern (Material, Atlassian, GOV.UK) semua menyertakan panduan reduced-motion.

Spring Physics: Alternatif Lebih Baru

Fungsi timing cubic-bezier menggambarkan gerakan sebagai interpolasi durasi-tetap di sepanjang kurva yang disetel-tangan. Spring physics menggambarkan gerakan sebagai penyelesaian alami dari osilator harmonik teredam: Anda menentukan massa, kekakuan, dan redaman, dan animasi berjalan sampai pegas berhenti. Pegas terasa lebih alami untuk gestur UI yang dapat diinterupsi karena mereka memiliki momentum yang berlanjut melalui interupsi: melepaskan gestur jentikan di tengah penerbangan, pegas berlanjut ke tujuannya pada kurva baru daripada terjepit. iOS Apple menggunakan spring physics untuk sebagian besar interaksi native (pantulan tampilan gulir di tepi, efek karet gelang dari geseran). React Spring (Paul Henschel), Framer Motion, dan fungsi easing CSS linear() (ketika diberi makan kurva pegas yang disampel) membawa semantik pegas ke web. Cubic-bezier tetap menjadi alat yang tepat untuk transisi UI durasi-tetap; pegas adalah alat yang tepat untuk gerakan yang digerakkan-gestur dan dapat diinterupsi. Editor ini menghasilkan cubic-bezier: bentuk yang tepat untuk 90% pekerjaan animasi UI pada 2026.

Kapan Anda Akan Mencari Alat Ini

• Mendesain animasi baru dengan perasaan. Seret titik kontrol sampai bola pratinjau bergerak seperti yang Anda inginkan, lalu salin CSS. Lebih cepat daripada mengetik empat angka dan memuat ulang halaman.
• Mencocokkan animasi dari produk lain. Rekayasa-balik timing animasi yang telah Anda lihat di tempat lain dengan menyesuaikan sampai pratinjau sesuai dengan ingatan Anda.
• Membangun pustaka gerakan merek. Pilih tiga atau empat cubic-bezier tertentu untuk "cepat", "halus", "emfatik", "pantulan" dan terapkan secara konsisten di seluruh produk.
• Meninjau spesifikasi animasi desainer. Tempel nilai cubic-bezier dari spesifikasi gerakan Figma, lihat apakah kurva menghasilkan gerakan yang dijelaskan desainer.
• Handoff insinyur-desainer. Seorang desainer menyeret kurva yang tepat di alat ini, menyalin CSS, dan menempelkannya ke pesan Slack: jauh lebih banyak sinyal daripada "buat lebih bouncy" yang samar.

Pertanyaan yang Sering Diajukan

Apa yang mewakili nilai-nilai itu?

Nilai (x1, y1, x2, y2) mendefinisikan dua titik kontrol. Nilai X harus antara 0 dan 1 (waktu), sementara nilai Y dapat melebihi rentang itu untuk efek overshoot atau pantul.

Apa easing CSS default?

Untuk transisi CSS (transition: opacity 300ms;) defaultnya adalah ease, setara dengan cubic-bezier(0.25, 0.1, 0.25, 1): awal cepat, akhir lambat. Untuk animasi CSS (animation: foo 1s;) defaultnya juga ease. Timpa dengan transition-timing-function atau animation-timing-function. Untuk sebagian besar gerakan UI, varian ease-out atau kurva yang dideselerasi gaya Material menghasilkan hasil yang terasa lebih baik daripada default.

Bagaimana cara membuat efek bouncy atau overshoot?

Dorong y2 di atas 1 (nilai tipikal 1,2-1,6) sehingga kurva sebentar melebihi tujuan sebelum kembali. Pantulan halus umum adalah cubic-bezier(0.34, 1.56, 0.64, 1). Untuk pantulan yang menonjol, Anda akan menginginkan spring-physics atau animasi multi-keyframe daripada cubic-bezier tunggal: kurva Bézier hanya dapat memiliki satu puncak, sehingga pantulan sejati (osilasi ganda) memerlukan keyframe pada langkah-langkah perantara.

Apakah kurva kustom lebih lambat daripada keyword bernama?

Tidak: keyword bernama adalah alias untuk cubic-bezier tertentu, dievaluasi oleh jalur kode yang sama. Kinerja bergantung pada properti apa yang Anda animasikan (transform/opacity = GPU-composited dan cepat; properti yang memengaruhi layout seperti top/left/width = lambat karena reflow), bukan pada kurva timing. Biaya evaluasi cubic-bezier dapat diabaikan.

Apakah alat ini bekerja offline?

Ya: kanvas kurva, animasi bola pratinjau, dan pembuatan kode CSS semuanya berjalan sepenuhnya di browser Anda melalui JavaScript. Tidak ada panggilan jaringan saat penggunaan. Bawa halaman offline (mode pesawat) setelah dimuat dan editor masih berfungsi. Tidak ada telemetri; nilai kurva yang Anda pilih tidak pernah meninggalkan perangkat Anda.

Alat terkait