0Pricing
CSS Academy · Pelajaran

Fungsi Easing: ease linear cubic-bezier

Kendalikan kurva kecepatan transition menggunakan kata kunci bawaan dan fungsi cubic-bezier().

Fungsi Easing: ease linear cubic-bezier adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa Itu Fungsi Easing?

Fungsi easing mengatur kurva kecepatan suatu transisi atau animasi — seberapa cepat animasi dipercepat atau diperlambat selama durasinya.

linear

linear mempertahankan kecepatan konstan sepanjang transisi. Berguna untuk bilah pemuatan dan indikator kemajuan yang diharapkan bergerak secara stabil.

  <div class="progress-track"><div class="progress"></div></div>

ease (Default)

ease dimulai dengan cepat, lalu melambat menjelang akhir. Ini adalah nilai bawaan dan terasa alami untuk sebagian besar transisi antarmuka.

ease-in

ease-in dimulai perlahan lalu dipercepat. Cocok untuk elemen yang meninggalkan layar (animasi keluar).

  <div class="modal">Open</div>
  <div class="modal closing">Closing (faded to invisible)</div>

ease-out

ease-out dimulai dengan cepat lalu melambat. Sangat cocok untuk elemen yang memasuki layar — elemen tersebut tiba dengan energi lalu berhenti secara halus.

  <div class="modal opening">Modal content</div>

ease-in-out

ease-in-out dimulai dan berakhir secara perlahan, dengan gerakan yang lebih cepat di tengah. Paling cocok untuk animasi berulang atau animasi bolak-balik.

cubic-bezier()

Menentukan kurva Bézier kubik kustom dengan empat titik kontrol. Memungkinkan pembuatan kurva easing seperti pegas dan kurva kustom.

  <div class="card">Card</div>

Membaca Nilai cubic-bezier

Keempat nilai tersebut menentukan dua titik kontrol: cubic-bezier(x1, y1, x2, y2). Nilai di atas 1 pada sumbu y menghasilkan efek melampaui batas (pegas). Gunakan alat seperti easings.net untuk memvisualisasikan kurva.

Fungsi steps()

steps(n, direction) membagi animasi menjadi n langkah diskret yang sama besar. Sangat cocok untuk animasi sprite dan efek mesin tik.

  <div class="sprite"></div>

Kata Kunci Arah steps()

Argumen kedua mengatur lokasi terjadinya langkah:

  • jump-start: langkah pertama pada waktu 0
  • jump-end: langkah terakhir pada akhir waktu (bawaan)
  • jump-both: langkah pada awal dan akhir
  • jump-none: tidak ada langkah pada kedua ujung

Modern: linear() untuk Kurva Kompleks

Fungsi linear() yang baru memungkinkan Anda menentukan kurva easing sembarang melalui beberapa titik — sehingga efek pegas dan pantulan dapat dibuat hanya dengan CSS tanpa keterbatasan cubic-bezier.

  <div class="spring">Spring easing</div>

Pemeriksaan Singkat

Fungsi easing mana yang mempertahankan kecepatan konstan sepanjang seluruh transisi?

Rangkuman

Fungsi easing mengatur kurva kecepatan animasi. Pilihan bawaan: linear, ease, ease-in, ease-out, ease-in-out. Kurva kustom menggunakan cubic-bezier(). Langkah diskret menggunakan steps(). Fungsi linear() yang baru memungkinkan pembuatan kurva kompleks seperti pegas.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Fungsi Easing: ease linear cubic-bezier” gratis?

Ya — teks lengkap “Fungsi Easing: ease linear cubic-bezier” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Fungsi Easing: ease linear cubic-bezier”?

Kendalikan kurva kecepatan transition menggunakan kata kunci bawaan dan fungsi cubic-bezier(). Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Fungsi Easing: ease linear cubic-bezier” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Durasi dan Waktu Properti Transition
  2. Fungsi Easing: ease linear cubic-bezier
  3. Menerapkan Transition pada Banyak Properti
  4. Performa: Properti yang Dapat Ditranformasi vs Pengecatan Ulang
← Kembali ke CSS Academy