📈 Satu perangkat,
setiap tugas desain

Generator Cubic Bezier

Desain kurva easing CSS kustom dengan pratinjau langsung dan animasi. Seret titik kontrol, pilih dari preset, dan salin fungsi cubic-bezier() secara instan.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

📈 Generator Cubic Bezier

Panduan Cubic Bezier

cubic-bezier() adalah fungsi timing CSS yang menentukan cara animasi berakselerasi dan melambat. Empat nilainya — x1, y1, x2, y2 — adalah dua titik kontrol kurva yang memetakan waktu ke progres. Sumbu X mewakili waktu (0 sampai 1) dan sumbu Y mewakili progres animasi.

Pilih preset atau seret titik kontrol oranye di kanvas untuk membentuk kurva easing Anda. Bola beranimasi menunjukkan persis bagaimana timing Anda terasa, dan output CSS siap ditempel ke transition atau animation apa pun.

Pro Tips

Frequently Asked Questions

Q: Apa itu cubic-bezier di CSS?
Apa itu cubic-bezier di CSS? Ini adalah fungsi timing yang dipakai di transition dan animation yang mendefinisikan kurva kecepatan: seberapa cepat animasi berprogres seiring waktu. Default-nya cubic-bezier(0.25, 0.1, 0.25, 1), juga disebut ease.
Q: Apa nilai easing standar?
Apa nilai easing standar? ease = (0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1), linear = (0, 0, 1, 1).
Q: Bagaimana membuat efek pantulan?
Bagaimana membuat efek pantulan? Lampaui nilai Y melebihi 1, seperti cubic-bezier(0.34, 1.56, 0.64, 1). Kurva sempat melewati target lalu kembali — pantulan seperti pegas.
Q: Mengapa animasi saya terlihat rusak dengan Y negatif?
Mengapa animasi saya terlihat rusak dengan Y negatif? Y negatif menciptakan antisipasi — elemen mundur sebelum maju. Disengaja untuk efek back-easing tapi terlihat salah pada kebanyakan transisi konten.
Q: Bisakah cubic-bezier dipakai di animasi?
Bisakah cubic-bezier dipakai di animasi? Ya, baik di transition maupun @keyframes animation, lewat properti timing-function. Juga berlaku untuk animasi terikat scroll.

Warna Batik Indonesia

Dari coklat sogan hingga biru indigo, warna batik Indonesia mewarisi teknik pewarnaan alami dari daun indigo, kulit pohon soga, dan kunyit. Setiap warna menyimpan filosofi Jawa yang dalam.

Coklat Sogan #8B4513

Warna khas batik klasik dari kulit pohon soga

Biru Indigo #1A3A5C

Pewarna alami dari daun indigo (nila)

Merah Batik #C41E3A

Warna berani khas batik pesisir

Kuning Kunyit #E3A857

Kuning alami dari rimpang kunyit

Hijau Lumut #8A9A5B

Warna alami dari campuran indigo dan kunyit

Ungu Terong #614051

Warna buah terong khas batik Sidoarjo

Krem Batik #F5F0E1

Warna dasar kain mori sebelum dibatik

Hitam Pekat #1B1B1B

Hitam dari getah pohon tingi untuk batik keraton

Biru Langit #4A90D9

Warna langit cerah khas batik pesisir

Oranye Jingga #FF7F00

Warna cerah khas batik kontemporer

Q: Apa itu warna sogan?
Apa itu warna sogan? Sogan (#8B4513) adalah warna coklat khas batik klasik yang dihasilkan dari kulit pohon soga. Warna ini identik dengan batik keraton Yogyakarta dan Solo yang elegan.
Q: Bagaimana warna indigo batik dibuat?
Bagaimana warna indigo batik dibuat? Biru indigo (#1A3A5C) dibuat dari daun indigo (Indigofera tinctoria) yang direndam dan difermentasi. Pewarna alami ini telah digunakan sejak zaman kerajaan Jawa.