Faaingo ya cubic-bezier ya CSS

Maelezo na matumizi

CSS na cubic-bezier() Faaingo inayotumika kumieleza mwelekeo wa cubic bezier.

Makampuni ya cubic bezier inaelewa na mitaaka ya P0, P1, P2 na P3. Kwenye CSS, P0 na P3 ni mitaaka ya kuanzia na kufikia ya mwelekeo, na koordinati ya mitaaka hizi ni kwa uhusiano wa namba. P0 ni (0, 0), inaeleza wakati wa kuanzia na hali ya kuanzia; P3 ni (1, 1), inaeleza wakati wa kufikia na hali ya kufikia.

cubic-bezier() Faaingo inayoweza kufanyishwa na animation-timing-function Makampuni na transition-timing-function Makampuni ya jumuiya yanayotumika pamoja.

Mfano

Mfano 1

Matokeo ya kusasa kwenye uharibifu kutoka kuanzia hadi kufikia:

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

Tafuta tena

Mfano 2

Onyesha elementi ya <div> yenye uharibifu wa kiasi cha vifaa vya cubic bezier tofauti:

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

Tafuta tena

Makadara ya CSS

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

Vivyo ya teknolojia

Makampuni ya browser

Jifuni ya tabia hii inaeleza sababu ya kuanzia kufikia na browseri ambao zimekubaliwa kufanya kazi hii kwa sababu ya toleo la kwanza.

Vipindi vya huzuni

Tafuta:Makina ya Kifaa cha CSS ya animation-timing-function

Tafuta:Mafuta wa transition-timing-function katika CSS