CSS cubic-bezier() Funksie
Voorbeeld
'n Oorgangseffek met veranderlike spoed van begin tot einde:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
Definisie en gebruik
Die cubic-bezier()-funksie definieer 'n Cubic Bezier-kromme.
'n Kubieke Bezier-kromme word gedefinieer deur vier punte P0, P1, P2 en P3. P0 en P3 is die begin en die einde van die kromme en in CSS is hierdie punte vasgestel aangesien die koördinate verhoudings is. P0 is (0, 0) en verteenwoordig die aanvanklike tyd en die aanvanklike toestand, P3 is (1, 1) en verteenwoordig die finale tyd en die finale toestand.
Die cubic-bezier() funksie kan gebruik word met die animasie-tydsberekening-funksie eienskap en die oorgang-tydberekening-funksie eienskap.
Weergawe: | CSS3 |
---|
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die funksie ten volle ondersteun.
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
CSS-sintaksis
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 |