CSS cubic-bezier() funktion

definition og brug

CSS cubic-bezier() funktionen bruges til at definere tredjestigsbezier-kurver.

Tredjestigsbezier-kurver defineres af fire punkter P0, P1, P2 og P3. I CSS er P0 og P3 kurvens start- og slutpunkter, og disse punkters koordinater er faste forhold. P0 er (0, 0), hvilket repræsenterer starttid og starttilstand; P3 er (1, 1), hvilket repræsenterer sluttid og sluttilstand.

cubic-bezier() funktion kan bruges med animation-timing-function egenskab og transition-timing-function egenskaber bruges sammen.

Eksempel

Eksempel 1

En overgangseffekt med ændrende hastighed fra start til slut:

div {
  bredde: 100 px;
  højde: 100 px;
  baggrund: rød;
  transition: bredde 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

Prøv det selv

Eksempel 2

Vis <div>-elementer med forskellige tredjestigsbezier-hastigheder:

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

Prøv det selv

CSS syntaks

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

Tekniske detaljer

Browserunderstøttelse

Tabelens tal angiver versionen af den første browser, der fuldt ud understøtter denne funktion.

Relaterede sider

Referencer:CSS animation-timing-function property

Referencer:CSS transition-timing-function egenskab