CSS cubic-bezier() functie

Definitie en gebruik

CSS cubic-bezier() Functie wordt gebruikt om de cubische Bezier-kromme te definiëren.

De cubische Bezier-kromme wordt gedefinieerd door vier punten P0, P1, P2 en P3. In CSS zijn P0 en P3 het beginpunt en eindpunt van de kromme, en de coördinaten van deze punten zijn vaste ratios. P0 is (0, 0), wat de initiële tijd en status vertegenwoordigt; P3 is (1, 1), wat de uiteindelijke tijd en status vertegenwoordigt.

cubic-bezier() Functies kunnen worden gebruikt met animation-timing-function Eigenschappen en transition-timing-function Eigenschappen worden samen gebruikt.

Voorbeeld

Voorbeeld 1

Een overgangseffect van snelheidswijziging van begin tot einde:

div {
  breedte: 100 px;
  hoogte: 100 px;
  achtergrond: rood;
  transition: breedte 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

Probeer het zelf

Voorbeeld 2

Toon <div>-elementen met verschillende cubische Bezier-snelheidswaarden:

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

Probeer het zelf

CSS syntaxis

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

Technische details

Browserondersteuning

Tafelgetallen geven de browserversie aan die de functie volledig ondersteunt.

Gerelateerde pagina's

Referentie:CSS animation-timing-function Eigenschap

Referentie:CSS transition-timing-function eigenschap