Lewati ke konten
Toolars
Jelajahi
Laporkan bug

Desain · utilitas Lokal

Generator Cubic Bezier CSS

CSS Cubic Bezier Generator

Bentuk kurva easing dengan dua titik kendali dan saksikan iramanya beranimasi pada durasi pilihan, lalu salin nilai cubic-bezier() yang siap produksi.

Jalur tugas / dari masukan ke hasil

Tempatkan titik kendali pertama

Berjalan lokal · Tidak ada yang diunggah

Cara kerja Generator Cubic Bezier CSS, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara mendesain kurva easing cubic-bezier

  1. 01

    Tempatkan titik kendali pertama

    Atur Titik kendali X1 antara 0 dan 1 serta Titik kendali Y1 antara −1 dan 2. Bagan kurva digambar ulang secara langsung, dengan garis pemandu dari titik awal ke pegangan Anda.

  2. 02

    Tempatkan titik kendali kedua

    Atur Titik kendali X2 (0–1) dan Titik kendali Y2 (−1 hingga 2). Menarik nilai Y melewati 1 adalah yang menciptakan overshoot yang membuat easing terasa pegas; menarik Y1 di bawah 0 menambahkan momen antisipasi sebelum gerakan dimulai.

  3. 03

    Atur durasinya

    Pilih Durasi dari 0,1 hingga 4 detik. Penanda di jalur gerak berulang melewatinya menggunakan kurva persis Anda, jadi irama yang Anda tonton adalah irama yang Anda kirim.

  4. 04

    Atau mulai dari kurva yang dikenal

    Kurva bawaan — 0,25; 0,1; 0,25; 1 — persis sama dengan kata kunci ease standar dan merupakan titik awal yang netral. Tekan Muat contoh untuk kurva overshoot pegas (0,34; 1,56; 0,64; 1) yang mendemonstrasikan apa yang dilakukan nilai Y di atas 1.

  5. 05

    Salin CSS timing

    Salin CSS atau Unduh .css menyimpan toolars-cubic-bezier.css. Aturan .motion menetapkan transition-duration dan kedua properti timing-function. animation-duration tidak ditetapkan; tambahkan durasi itu sendiri untuk animasi keyframe.

  6. 06

    Baca bagannya sebelum dikirim

    Bagan memetakan progres terhadap waktu antara titik awal dan akhir yang tetap: bagian datar berarti lambat, bagian curam berarti cepat. Kurva yang turun di bawah awal atau naik melewati akhir bukanlah kesalahan — itulah antisipasi dan overshoot, digambar dengan jujur.

Fakta alat

Pemrosesan
Di browser Anda
Input meninggalkan perangkat
Tidak pernah
Retensi
Tidak ada yang disimpan
Harga
Gratis

Masukan Anda tetap di peramban.

Generator Cubic Bezier CSS menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Apa yang sebenarnya dilakukan Generator Cubic Bezier CSS

Modal yang harus membuka cepat namun mendarat lembut, hover kartu yang perlu overshoot kecil, tooltip onboarding yang harus terasa tidak tergesa-gesa — easing adalah pembeda antara antarmuka yang terasa selesai dan yang terasa bawaan. Memetakan kurva di sini, dengan pratinjau animasi nyata, lebih baik daripada menebak empat angka di stylesheet, dan eksperimennya tetap berada di tab. Begitu loop-nya terasa pas, keempat nilainya sudah benar untuk produksi.

Pertanyaan umum

Mengapa X hanya bisa 0 hingga 1 sementara Y bisa −1 hingga 2?
Standar CSS menjaga kedua nilai X di dalam [0, 1] agar waktu selalu bergerak maju sepanjang kurva. Y tidak punya batas seperti itu — nilai di bawah 0 atau di atas 1 menghasilkan antisipasi dan overshoot — dan alat ini membatasi Y pada −1 hingga 2, yang mencakup setiap easing praktis.
Apa tepatnya yang diekspor?
Sebuah kelas .motion dengan tiga deklarasi: transition-duration diatur ke detik pilihan Anda, dan nilai cubic-bezier() yang sama ditetapkan ke transition-timing-function dan animation-timing-function.
Bagaimana cara membaca pratinjaunya?
Bagan memetakan kurva antara titik awal dan akhir yang tetap dengan pemandu ke kedua pegangan kendali, dan jalur di bawahnya menganimasikan penanda pada durasi yang dipilih menggunakan fungsi timing nyata — irama yang jujur, bukan perkiraan.
Bagaimana membentuk ease-in, ease-out, atau pegas?
Dorong X pegangan pertama ke arah 1 dengan Y rendah untuk ease-in yang lambat di awal; bawa X pegangan kedua ke arah 0 dengan Y tinggi untuk ease-out yang lembut. Dorong salah satu Y melewati 1 untuk pegas yang melampaui targetnya, atau di bawah 0 untuk antisipasi.
Apakah kelasnya bekerja untuk transisi dan animasi keyframe sekaligus?
Ya — nilai cubic-bezier() yang sama ditetapkan ke kedua properti timing-function, dan durasinya berada di transition-duration. Jika Anda hanya butuh satu mekanisme, hapus baris satunya setelah menempel; kurvanya sendiri agnostik terhadap mekanisme. Dengan keyframe, ingat bahwa fungsi timing berlaku di antara setiap pasangan bingkai, bukan di seluruh rangkaian.
Apakah ada yang diunggah atau disimpan?
Tidak. Kurva dihitung dan dipratinjau secara lokal di tab ini, tidak perlu akun, dan tidak ada yang dicatat atau dikirim. Tekan Atur ulang untuk mengembalikan easing bawaan.

Lanjutkan di Desain

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Generator Loader CSS

CSS Loader Generator

Rancang loader CSS cincin orbit atau tiga titik dengan ukuran, durasi, dan warna yang dapat disetel, lalu salin kode lengkap dengan blok prefers-reduced-motion.

Buat

Generator Checkbox CSS

CSS Checkbox Generator

Beri gaya kotak centang HTML asli dengan ukuran, border, dan warna pilihan, lalu salin CSS yang mempertahankan fokus keyboard dan status disabled.

Buat

Generator Switch CSS

CSS Switch Generator

Rancang sakelar alih murni CSS dengan geometri lintasan dan kenop yang dapat diukur, lalu salin kodenya dengan dukungan reduced-motion — tanpa JavaScript.

Buat

Generator Clip Path CSS

CSS Clip Path Generator

Edit titik poligon dengan menyeret, papan ketik, atau koordinat. Mulai dari empat prasetel dan salin deklarasi clip-path atau CSS lengkap secara lokal.

Buat