CSS cubic-bezier() ఫంక్షన్

నిర్వచనం మరియు ఉపయోగం

CSS యొక్క cubic-bezier() ఫంక్షన్స్ ను నిర్వచించడానికి ఉపయోగించబడతాయి.

క్యూబిక్ బీజర్ కర్వలు నాలుగు పద్ధతులు P0, P1, P2 మరియు P3 ని నిర్వచిస్తాయి. CSS లో, P0 మరియు P3 కర్వల ప్రారంభం మరియు ముగింపు పద్ధతులు. ఈ పద్ధతుల నిర్దేశాలు నిర్దిష్ట రేటులు. P0 (0, 0) ప్రారంభ సమయం మరియు ప్రారంభ స్థితిని ప్రతినిధీకరిస్తుంది; P3 (1, 1) చివరి సమయం మరియు చివరి స్థితిని ప్రతినిధీకరిస్తుంది.

cubic-bezier() ఫంక్షన్స్ తో కలిసి ఉపయోగించబడతాయి. animation-timing-function అంశాలు మరియు transition-timing-function సంబంధిత అంశాలు కలిసి ఉపయోగించబడతాయి.

ఉదాహరణ

ఉదాహరణ 1

ప్రారంభం నుండి ముగింపు వరకు వేగం మారుతున్న ట్రాన్జిషన్ ప్రభావం:

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 2

వివిధ క్యూబిక్ బీజర్ వేగాలు కలిగిన <div> ఎలిమెంట్లను ప్రదర్శించండి:

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

స్వయంగా ప్రయత్నించండి

CSS సంకేతాలు

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

సాంకేతిక వివరాలు

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ ఫంక్షన్ ను పూర్తిగా మద్దతు ఇస్తున్న బ్రౌజర్ వెర్షన్ ను సూచిస్తాయి.

相关页面

పరిగణనలో ఉన్నది:సిఎస్ఎస్ ఏనిమేషన్-టైమింగ్ ఫంక్షన్ అట్రిబ్యూట్

పరిగణనలో ఉన్నది:CSS ట్రాన్సిషన్-టైమింగ్-ఫంక్షన్ అట్రిబ్యూట్