CSS kubieke-bezier() Functie
Voorbeeld
Een overgangseffect met variabele snelheid van begin tot eind:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
Definitie en gebruik
De functie cubic-bezier() definieert een Cubic Bézier-curve.
Een Cubic Bézier-curve wordt gedefinieerd door vier punten P0, P1, P2 en P3. P0 en P3 zijn het begin en het einde van de curve en in CSS zijn deze punten vast omdat de coördinaten verhoudingen zijn. P0 is (0, 0) en vertegenwoordigt de begintijd en de begintoestand, P3 is (1, 1) en vertegenwoordigt de eindtijd en de eindtoestand.
De functie cubic-bezier() kan worden gebruikt met de eigenschap animation-timing-function en de eigenschap transition-timing-function .
Versie: | CSS3 |
---|
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de functie volledig ondersteunt.
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
CSS-syntaxis
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 |