Rekomendasi pelajaran：

Fungsi cubic-bezier() CSS

Definisi dan penggunaan CSS cubic-bezier() Fungsi digunakan untuk menentukan kurva kubik tiga.

Kurva kubik tiga ditentukan oleh empat titik P0, P1, P2, dan P3. Dalam CSS, P0 dan P3 adalah titik awal dan akhir kurva, dan koordinat titik ini adalah laju rasio yang tetap. P0 adalah (0, 0), yang mewakili waktu awal dan status awal; P3 adalah (1, 1), yang mewakili waktu akhir dan status akhir.

cubic-bezier() Fungsi dapat digunakan bersama dengan animation-timing-function Properti dan transition-timing-function Properti digunakan bersama-sama.

Contoh

Contoh 1

Effeekt transisi yang berubah kecepatan dari awal hingga akhir：

div {
  lebar: 100px;
  tinggi: 100px;
  latar belakang: merah;
  transition: lebar 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

Coba sendiri

Contoh 2

Tunjukkan elemen <div> yang memiliki nilai kecepatan kurva kubik yang berbeda：

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Coba sendiri

Syarat CSS

cubic-bezier(x1,y1,x2,y2)

Detil teknis

Dukungan browser

Angka di tabel menunjukkan versi browser yang sepenuhnya mendukung fungsi ini.

Halaman yang berhubungan

Referensi：Atribut animation-timing-function CSS

Referensi：Atribut transition-timing-function CSS