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 transition-timing-function کی ویژگی