CSS cubic-bezier() fonksiyonu

Tanımı ve Kullanımı

CSS'nin cubic-bezier() fonksiyonu, üçlü Bezier eğrisini tanımlamak için kullanılır.

Üçlü Bezier eğrisi, dört nokta P0, P1, P2 ve P3 ile tanımlanır. CSS'te, P0 ve P3 eğri başlangıcı ve bitiş noktasıdır ve bu noktaların koordinatları sabit oranlardır. P0 (0, 0), başlangıç zamanı ve başlangıç durumunu temsil eder; P3 (1, 1), nihai zamanı ve nihai durumu temsil eder.

cubic-bezier() fonksiyonları animation-timing-function Özellikleri ve transition-timing-function Özellikler birlikte kullanılır.

Örnek

Örnek 1

Başlangıçtan bitişe doğru hız değişen bir geçiş etkisi:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

Kişisel olarak deneyin

Örnek 2

Farklı üçlü Bezier hız değerlerine sahip <div> elementlerini gösteren

#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);}

Kişisel olarak deneyin

CSS Grameri

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

Teknik Ayrıntılar

Tarayıcı Desteği

Tablodeki rakamlar, bu işlevi tam olarak destekleyen ilk tarayıcı sürümünü gösterir.

İlgili sayfalar

Referans:CSS animation-timing-function Özelliği

Referans:CSS transition-timing-function özelliği