CSS cubic-bezier() Fungsi
Contoh
Efek transisi dengan kecepatan variabel dari awal hingga akhir:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
Definisi dan Penggunaan
Fungsi cubic-bezier() mendefinisikan kurva Cubic Bezier.
Kurva Cubic Bezier didefinisikan oleh empat titik P0, P1, P2, dan P3. P0 dan P3 adalah awal dan akhir kurva dan, dalam CSS titik-titik ini ditetapkan karena koordinatnya adalah rasio. P0 adalah (0, 0) dan mewakili waktu awal dan keadaan awal, P3 adalah (1, 1) dan mewakili waktu akhir dan keadaan akhir.
Fungsi cubic-bezier() dapat digunakan dengan properti fungsi waktu-animasi dan properti fungsi -waktu-transisi .
Versi: kapan: | CSS3 |
---|
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung fungsi tersebut.
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
Sintaks CSS
cubic-bezier(x1,y1,x2,y2)
Value | Description |
---|---|
x1,y1,x2,y2 | Required. Numeric values. x1 and x2 must be a number from 0 to 1 |