CSS kübik-bezier() İşlev
Örnek
Baştan sona değişken hıza sahip bir geçiş efekti:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
Tanım ve Kullanım
kübik-bezier() işlevi, bir Kübik Bezier eğrisini tanımlar.
Bir Kübik Bezier eğrisi dört nokta P0, P1, P2 ve P3 ile tanımlanır. P0 ve P3 eğrinin başlangıcı ve bitişidir ve CSS'de bu noktalar koordinatlar oranlar olduğundan sabittir. P0 (0, 0)'dır ve başlangıç zamanı ve başlangıç durumunu temsil eder, P3 (1, 1)'dir ve son zamanı ve son durumu temsil eder.
kübik-bezier() işlevi, animasyon zamanlama işlevi özelliği ve geçiş zamanlama işlevi özelliği ile kullanılabilir.
Sürüm: | CSS3 |
---|
Tarayıcı Desteği
Tablodaki sayılar, işlevi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
CSS Sözdizimi
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 |