Polecane kursy:

Funkcja cubic-bezier() w CSS

Definicja i użycie CSS cubic-bezier() Funkcja służy do definiowania trójpunktowych krzywych bezyli.

Trójpunktowe krzywe bezyli są zdefiniowane przez cztery punkty P0, P1, P2 i P3. W CSS, P0 i P3 są punktami początkowymi i końcowymi krzywej, a współrzędne tych punktów są stałe proporcje. P0 jest (0, 0), co reprezentuje początkowy czas i stan początkowy; P3 jest (1, 1), co reprezentuje końcowy czas i stan końcowy.

cubic-bezier() Funkcje mogą być używane z animation-timing-function Atrybuty i transition-timing-function Atrybuty używane razem.

Przykład

Przykład 1

Przejście z różnicującą prędkością od początku do końca:

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

Spróbuj sam

Przykład 2

Pokazanie elementów <div>, które mają różne wartości prędkości trójpunktowych bezyli.

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

Spróbuj sam

Gramatyka CSS

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

Szczegóły techniczne

Wspierane przeglądarki

Tabela zawiera numery wersji przeglądarek, które w pełni wspierają tę funkcję.

Strony związane

Odniesienie:Atrybut animation-timing-function CSS

Odniesienie:Atrybut transition-timing-function w CSS