Pembuat cubic-bezier Visual untuk Easing CSS
Pembuat cubic-bezier ini membantu Anda merancang kurva easing CSS secara visual, bukan dengan menebak-nebak. Geser dua titik kontrol, lihat kurva berubah secara real-time, lalu salin nilai cubic-bezier() yang tepat untuk transisi dan animasi Anda.
Tool ini dibuat untuk developer front-end, desainer UI, dan siapa saja yang menyempurnakan gerakan tanpa harus mengetik empat angka secara buta. Mulai dari salah satu dari 29 preset, lalu geser pegangannya sampai ease-in, ease-out, atau pantulan Anda terasa pas.
Cara Memakai Editor
Bentuk kurva Anda
Geser dua pegangan titik kontrol di kanvas untuk melengkungkan kurva easing. Pegangan P1 membentuk awal gerakan dan pegangan P2 membentuk akhirnya. Koordinatnya muncul saat Anda menggeser.
Ketik nilai yang persis
Lebih suka presisi? Ketik empat angka ke kolom input di bawah kanvas. Nilai X dijaga antara 0 dan 1, sedangkan nilai Y bisa berkisar dari -0.5 hingga 1.5 untuk efek overshoot.
Mulai dari preset
Klik salah satu dari 29 preset untuk menerapkannya seketika, lalu lanjut menyetel. Standar CSS (linear, ease, ease-in, ease-out, ease-in-out) dan delapan keluarga Penner semuanya hanya berjarak satu klik.
Lihat pratinjau gerakan
Amati bola animasi bergerak dengan kurva Anda. Aktifkan Bandingkan untuk mengadunya melawan gerakan linear, dan geser slider Durasi untuk menguji kecepatan dari 200ms hingga 3 detik.
Salin CSS-nya
Tekan Salin untuk mengambil transition-timing-function dan animation-timing-function sekaligus. Anda juga bisa mengklik nilai cubic-bezier itu sendiri untuk salin cepat.
Fitur
Kanvas Bezier Interaktif
Kanvas SVG dengan grid koordinat, label sumbu, dan garis referensi linear diagonal. Geser titik kontrol P1 dan P2 untuk membentuk kurva, dengan koordinat langsung tampil saat Anda menggeser.
29 Preset Easing
5 easing standar CSS plus 24 fungsi Penner dalam 8 keluarga (Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back), masing-masing ditampilkan dengan thumbnail mini kurvanya.
Adu Kurva
Jalankan kurva kustom Anda berdampingan dengan easing linear dalam balapan bola, sehingga Anda langsung melihat di mana gerakan terasa cepat, lambat, atau berhenti.
Pratinjau Multi-Properti
Lihat satu kurva easing menggerakkan empat properti CSS sekaligus: Posisi, Skala, Rotasi, dan Opasitas, agar Anda bisa memilih rasa yang pas untuk kebutuhan Anda.
Dukungan Overshoot
Nilai Y bisa membentang dari -0.5 hingga 1.5, memungkinkan Anda membuat kurva yang overshoot dan memantul kembali untuk gerakan hidup seperti pegas, contohnya keluarga Back.
Input Angka
Empat kolom input tetap tersinkron sempurna dengan kanvas, jadi Anda bisa mengetik nilai persis atau membaca kembali angka di balik kurva mana pun yang digeser.
Durasi yang Bisa Diatur
Uji easing Anda di kecepatan apa pun dengan slider durasi dari 200ms untuk mikro-interaksi yang gesit hingga 3 detik untuk transisi lambat yang dramatis.
CSS Siap Salin
Dapatkan output rapi untuk transition-timing-function dan animation-timing-function, dengan salin sekali klik dan salin cepat pada teks nilainya.
Pertanyaan yang Sering Diajukan
Apa itu cubic-bezier di CSS?
cubic-bezier(x1, y1, x2, y2) adalah fungsi CSS yang mendefinisikan kurva timing kustom untuk transisi dan animasi. Empat angka itu mengontrol dua titik pegangan yang membentuk bagaimana animasi berakselerasi dan melambat sepanjang durasinya.
Apa arti empat nilai cubic-bezier?
Mereka adalah dua titik kontrol: P1 (x1, y1) dan P2 (x2, y2). Nilai X mewakili waktu, di mana 0 adalah awal dan 1 adalah akhir, serta harus tetap antara 0 dan 1. Nilai Y mewakili progres dan boleh keluar dari rentang 0 hingga 1 untuk overshoot.
Bagaimana membuat kurva easing pantulan atau overshoot?
Atur nilai Y di bawah 0 atau di atas 1. Nilai di bawah 0 membuat gerakan sejenak mundur, dan nilai di atas 1 membuatnya melewati target sebelum menetap, sehingga tercipta rasa pantulan atau pegas. Keluarga preset Back dibangun di atas trik ini. Di editor ini Y bisa berkisar dari -0.5 hingga 1.5.
Apa itu fungsi easing Penner?
Persamaan easing dari Robert Penner adalah seperangkat kurva gerakan standar yang banyak dipakai dalam animasi. Setiap keluarga (Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back) hadir dalam tiga varian: In untuk awal yang lambat, Out untuk akhir yang lambat, dan InOut untuk keduanya. Editor ini menyediakan aproksimasi cubic-bezier dari kurva-kurva tersebut sebagai preset.
Apa beda cubic-bezier dengan ease-in-out?
ease-in-out hanyalah kata kunci bernama untuk satu kurva cubic-bezier spesifik (0.42, 0, 0.58, 1) yang mulai dan berakhir secara lambat. cubic-bezier() adalah fungsi umum yang memungkinkan Anda mendefinisikan kurva apa pun yang diinginkan, termasuk ease-in-out dan banyak kurva lain yang tidak bisa dinyatakan oleh kata kunci. Gunakan Bandingkan untuk melihat seberapa beda kurva kustom dari linear.
Bagaimana cara memakai kode yang dihasilkan?
Salin output-nya dan terapkan nilainya ke transisi atau animasi Anda, misalnya transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); atau animation: slide-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);. Editor ini menghasilkan properti timing-function transisi dan animasi sekaligus agar Anda bisa langsung memasang salah satunya.
Belum ada komentar. Jadilah yang pertama berkomentar!