Titik Kontrol

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

Preset Pelonggaran Populer

Keluaran CSS

cubic-bezier(0.25, 0.1, 0.25, 1)

Preview

Duration: 500ms

Visualisasi Kurva Bezier

time (1) easing (1) easing (0) P0 (0, 1) P1 (0.25, 0.1) P2 (0.25, 1) P3 (1, 1)

x1

0.25

y1

0.1

x2

0.25

y2

1

Dokumentasi Cubic Bezier

Apa itu Kurva Bezier Kubik?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

Sintaks CSS

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Kasus Penggunaan Umum

  • Transisi Animasi:Buat animasi halus untuk elemen yang mengubah properti.
  • Efek Gulir:Kontrol kecepatan animasi gulir.
  • Elemen Interaktif:Tentukan bagaimana elemen merespons interaksi pengguna seperti mengarahkan kursor atau mengklik.
  • Desain Gerakan:Buat urutan gerakan yang kompleks untuk elemen UI.

Fungsi Pelonggaran Populer

Ease (default)

Mulai lambat, berakselerasi dengan cepat, lalu melambat lagi.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

Kecepatan konstan dari awal hingga akhir.

cubic-bezier(0, 0, 1, 1)

Ease-in

Mulai lambat, lalu berakselerasi.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

Mulai dengan cepat, lalu melambat.

cubic-bezier(0, 0, 0.58, 1)

Tips Membuat Kurva Kustom

  1. Pertahankan nilai x antara 0 dan 1:Nilai di luar rentang ini dapat menyebabkan perilaku yang tidak terduga.
  2. Visualisasikan kurva:Gunakan grafik interaktif untuk memahami bagaimana perubahan memengaruhi animasi.
  3. Uji dengan elemen nyata:Selalu pratinjau kurva Anda dengan komponen UI yang sebenarnya untuk memastikannya terasa benar.
  4. Simpan preset:Tandai kurva yang berguna untuk proyek mendatang.

Related Tools

Generator Transisi CSS3

Transisi opasitas yang mulus

Konverter Stylus ke CSS

Ubah kode SCSS Anda menjadi CSS. Cepat, mudah, dan aman.

Hasilkan Transformasi CSS3 dengan Mudah

Alat yang kuat dan intuitif untuk membuat transformasi CSS3 yang kompleks tanpa menulis kode. Visualisasikan perubahan secara real-time dan salin CSS yang dihasilkan untuk digunakan dalam proyek Anda.

Hasilkan teks tiruan untuk desain Anda

Buat teks placeholder yang realistis untuk situs web, aplikasi, dan dokumen Anda dengan generator Lorem Ipsum kami.

Mengonversi teks di antara kasus yang berbeda

Ubah teks Anda dengan mudah menjadi berbagai gaya kasus dengan alat konverter kasus serbaguna kami.

Konverter angka Romawi ke Angka

Ubah angka Romawi ke padanan numeriknya dengan penjelasan langkah demi langkah