Mempermudah Fungsi Visualizer
Visualisasikan, bandingkan, dan hasilkan fungsi pelonggaran CSS dengan editor kurva kubik-bezier SVG interaktif. Seret dua titik kontrol (P1, P2) pada kurva untuk membuat easing kustom Anda sendiri - atau pilih dari 18+ preset bawaan termasuk kemudahan, pantulan, elastis, punggung, dan kurva yang ditekankan Desain Material. Bandingkan hingga 6 kurva pelonggaran secara berdampingan dalam hamparan perbandingan, pratinjau gerakan dengan titik animasi, dan salin CSS siap produksi untuk properti transisi dan animasi. Semua pemrosesan berjalan secara lokal di browser Anda - sepenuhnya gratis, tidak perlu mendaftar.
Control Points
transition: all 0.4s ease;
animation: myAnim 0.4s ease;
Tentang Fungsi Pelonggaran CSS
- Fungsi pelonggaran CSS mengontrol laju perubahan selama animasi atau transisi. Alih-alih animasi kecepatan konstan yang membosankan, easing membuat gerakan terasa alami - berakselerasi, melambat, memantul, atau melampaui batas. Tipe yang paling umum adalah kubik-bezier(), yang ditentukan oleh dua titik kontrol (P1, P2) yang membentuk kurva dari awal (0,0) hingga akhir (1,1).
- Editor SVG interaktif memungkinkan Anda menyeret dua titik kontrol pada kisi koordinat. Sumbu X mewakili waktu (0% hingga 100% durasi animasi), dan sumbu Y mewakili kemajuan (0% hingga 100% perubahan properti). Bentuk kurva di antara titik-titik ini menentukan pelonggaran: bagian yang curam berarti perubahan yang cepat, bagian yang datar berarti perubahan yang lambat.
- P1 (pegangan pertama) mengontrol akselerasi awal; P2 (pegangan kedua) mengontrol perlambatan terakhir. P1 di dekat kanan bawah menciptakan start lambat yang berakselerasi. P2 di dekat kanan atas menciptakan start cepat yang melambat. Nilai di luar kisaran 0-1 (seperti y1=-0,5) menciptakan efek melampaui batas seperti memantul atau melompat.
- Pelonggaran, durasi, dan penundaan adalah properti animasi independen. Durasi mengontrol berapa lama animasi berjalan. Kontrol penundaan saat dimulai. Easing mengontrol tempo gerakan dalam durasi tersebut. Durasi yang cepat dengan pelonggaran yang dramatis menciptakan gerakan yang tajam dan hidup. Durasi lambat dengan pelonggaran lembut menciptakan transisi yang mulus dan elegan.
Pertanyaan yang Sering Diajukan
Fungsi pelonggaran CSS menentukan laju perubahan properti seiring waktu selama animasi atau transisi. Alih-alih bergerak dengan kecepatan konstan, easing memungkinkan animasi dipercepat, diperlambat, memantul, atau melampaui batas. Tipe yang paling umum adalah kubik-bezier(), yang didefinisikan oleh empat nilai yang mewakili dua titik kontrol yang membentuk kurva pelonggaran.
Kurva kubik-bezier memiliki empat parameter: x1, y1, x2, y2. P1 (x1, y1) mengontrol bagaimana animasi dimulai - ini menentukan akselerasi awal. P2 (x2, y2) mengontrol bagaimana animasi berakhir - ini menentukan perlambatan akhir. Kedua titik berada pada kotak koordinat di mana X = waktu (0 hingga 1) dan Y = kemajuan (0 hingga 1).
Ketika nilai titik kontrol Y berada di bawah 0 atau di atas 1, kurva melampaui batas - yang berarti properti animasi untuk sementara melampaui nilai akhirnya. Ini menciptakan efek pantulan dan pegas. Misalnya, Back In dimulai dengan mundur sedikit sebelum bergerak maju.
Ease-in dimulai dengan lambat dan berakselerasi - bagus untuk elemen yang memasuki layar. Ease-out dimulai dengan cepat dan melambat - bagus untuk elemen yang meninggalkan layar. Kemudahan menggabungkan keduanya: awal yang lembut dan akhir yang lembut dengan bagian tengah yang lebih cepat.
Gunakan fungsi kubik-bezier() dalam properti transisi atau animasi Anda: transisi: opacity 0,3s kubik-bezier(0,25, 0,1, 0,25, 1);. Keempat nilai tersebut adalah x1, y1, x2, y2. Anda dapat menyeret titik kontrol di alat ini untuk menemukan kurva sempurna dan menyalin nilai CSS yang dihasilkan.
Untuk sebagian besar interaksi UI (status hover, modals, tooltips), disarankan untuk melakukan ease-out - objek yang dimulai dengan cepat dan melambat akan terasa responsif dan alami. Untuk animasi masuk, gunakan ease-in-out atau kurva yang ditekankan Desain Material. Hindari linear untuk UI - rasanya seperti robot.
Ya. Gunakan nilai arbitrer: transisi-[cubic-bezier(0.68,-0.55,0.27,1.55)] atau tambahkan pelonggaran khusus ke tailwind.config.js Anda di bawah theme.extend.transitionTimingFunction.
Ya - kubik-bezier() dan pelonggaran kata kunci (ease, ease-in, ease-out, ease-in-out, linear) didukung di semua browser modern. Steps() juga didukung secara luas di Chrome, Firefox, Safari, dan Edge.