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 animation-timing-function অ্যাট্রিবিউট

প্রত্যাবলোকন:CSS transition-timing-function এটি