আমি কীভাবে CSS-এর জন্য একটি কাস্টম cubic-bezier ইজিং কার্ভ তৈরি করব?

গ্রাফের দুটি কন্ট্রোল পয়েন্ট হ্যান্ডেল টেনে আনুন, সঠিক x1, y1, x2, y2 মান টাইপ করুন, অথবা একটি প্রিসেট বেছে নিন। তারপর আউটপুট ফর্ম্যাট-এর অধীনে CSS নির্বাচন করুন এবং transition-timing-function-এর জন্য cubic-bezier() মান পেতে কপি করুন-এ ক্লিক করুন।

আমি কীভাবে cubic-bezier দিয়ে বাউন্স বা ওভারশুট ইফেক্ট তৈরি করব?

একটি হ্যান্ডেল বক্সের উপরে বা নীচে টেনে আনুন যাতে এর Y মান ০-১ অতিক্রম করে। Y সেই সীমা অতিক্রম করতে পারে, যেখানে X ০ এবং ১-এর মধ্যে থাকে। back-out এবং anticipate প্রিসেটগুলি তৈরি ওভারশুট শুরুর পয়েন্ট।

আমি কি Tailwind, Framer Motion বা anime.js-এর জন্য ইজিং পেতে পারি?

হ্যাঁ। আউটপুট ফর্ম্যাট ট্যাবগুলি হলো CSS, Tailwind, Framer Motion এবং anime.js। এরা সবাই একই চারটি সংখ্যা ফর্ম্যাট করে, তাই একটি ট্যাব বেছে নিন এবং স্নিপেটটি আপনার ক্লিপবোর্ডে রাখতে কপি করুন ক্লিক করুন।

সম্পাদনা করার জন্য আমি কীভাবে একটি বিদ্যমান cubic-bezier মান লোড করব?

ইম্পোর্ট বক্সে cubic-bezier(.17, .67, .83, .67)-এর মতো একটি মান পেস্ট করুন এবং লোড করুন ক্লিক করুন। যদি চারটি সংখ্যা পড়া না যায়, আপনি একটি ত্রুটি বার্তা পাবেন। কার্ভটি হ্যাশের পরে পৃষ্ঠার URL-এও সংরক্ষিত থাকে, তাই এটি শেয়ার করা যায়।

প্রিভিউ আমার বাস্তব ট্রানজিশনের চেয়ে ধীর মনে হচ্ছে কেন?

মোশন পূর্বদর্শন একটি সময়কাল সেটিং ব্যবহার করে যা আপনি পরিবর্তন করতে পারেন, এবং ডিফল্ট ধীর হয় যাতে আপনি কার্ভটি অধ্যয়ন করতে পারেন। সময়কাল ছোট করুন, তারপর আপনি যে গতিতে শিপ করার পরিকল্পনা করছেন সেই গতিতে মোশন দেখতে Replay ব্যবহার করুন।

এটি কি সত্যিই বিনামূল্যে?

হ্যাঁ। প্রতিটি টুল বিনামূল্যে ব্যবহার করা যায়, কোনো অ্যাকাউন্ট বা ক্রেডিট কার্ড ছাড়াই। কাজটি আমাদের সার্ভারের পরিবর্তে আপনার ডিভাইসে চলে, যার কারণে এটি চালানো বিনামূল্যে থাকে।

এটি মোবাইলে কাজ করে?

হ্যাঁ। কিছু ইনস্টল না করেই iOS ও Android-এর আধুনিক মোবাইল ব্রাউজারে চলে।

📈

বিনামূল্যে CSS Cubic-Bezier ইজিং জেনারেটর

কন্ট্রোল পয়েন্ট টেনে CSS ইজিং কার্ভ ডিজাইন করুন, মোশন লাইভ প্রিভিউ করুন এবং cubic-bezier() মান কপি করুন। ওভারশুট/বাউন্স প্রিসেট অন্তর্ভুক্ত।

ব্রাউজারেই চলেসাইন-আপ নেই, পপ-আপ নেইলগইনের প্রয়োজন নেইচিরকালের জন্য বিনামূল্যে

একবার লোড হলে অফলাইনেও কাজ করে

কার্ভ আকার দিতে teal ও গোলাপি হ্যান্ডেল টানুন

নিয়ন্ত্রণ পয়েন্ট

x1y1x2y2

মোশন পূর্বদর্শন

সময়কাল১.৬ সেঃ

প্রস্থ ট্রানজিশন

CSS মান

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

প্রিসেট

গোলাপি ও teal হ্যান্ডেল বাক্সের উপরে বা নিচে টানতে পারে (Y ০–১ এর বাইরে) back-out ও anticipate-এর মতো 'ওভারশুট' / বাউন্স ইফেক্ট তৈরি করতে। X ০–১ এর মধ্যে থাকে (সময় বিপরীত হতে পারে না)।

সাধারণ ব্যবহার

কাস্টম সিএসএস ট্রানজিশন সহজতাহোভার প্রভাব, মেনু এবং UI ট্রানজিশনের জন্য প্রাকৃতিক-অনুভূতি সহজতা ডিজাইন করুন।
বাউন্স এবং ওভারশুট অ্যানিমেশননিয়ন্ত্রণ পয়েন্টগুলি বাক্সের বাইরে টেনে প্লেফুল স্প্রিং/বাউন্স গতি তৈরি করুন।
@keyframes অ্যানিমেশনের জন্য সহজতাসিএসএস কীফ্রেম অ্যানিমেশনের জন্য সঠিক অ্যানিমেশন-টাইমিং-ফাংশন চয়ন করুন।
জেএস অ্যানিমেশন লাইব্রেরির জন্য সহজতা মানGSAP, Framer Motion, anime.js এবং আরও অনেক কিছুর জন্য কিউবিক-বেজিয়ার মান পান।
সহজতা কীভাবে কাজ করে তা বুঝুনবেজিয়ার বক্ররেখা এবং এটি যে গতিবেগ তৈরি করে তার মধ্যে সম্পর্ক দেখুন।

কিভাবে কাজ করে

এডিটরটি পুরোপুরি ব্রাউজারে React state ও SVG দিয়ে তৈরি — কার্ভের গণিত কোনো লাইব্রেরি করে না। দুটি টেনে সরানো যায় এমন কন্ট্রোল পয়েন্ট একটি SVG cubic Bezier পথ নির্ধারণ করে, আর ব্রাউজারের নিজস্ব CSS অ্যানিমেশন ইঞ্জিন ফলাফলের cubic-bezier() মান সরাসরি একটি @keyframes নিয়মে বসিয়ে মোশন প্রিভিউ চালায়।

1
কন্ট্রোল পয়েন্ট টানুন বা টাইপ করুন
দুটি হ্যান্ডেল (P1 টিল, P2 গোলাপি) একটি SVG ক্যানভাসে থাকে। টানার জন্য setPointerCapture-সহ Pointer Events API ব্যবহার হয়, তাই SVG-র সীমার বাইরেও হ্যান্ডেল আপনার আঙুল বা কার্সর অনুসরণ করে। অ্যারো কী দিয়েও হ্যান্ডেল সামান্য সরাতে পারেন, বা x1/y1/x2/y2 নম্বর ইনপুটে সঠিক মান টাইপ করতে পারেন।
2
SVG রিয়েল টাইমে কার্ভ আঁকে
কার্ভটি একটি মাত্র SVG <path> এলিমেন্ট, যার C (cubic Bezier) কমান্ড প্রতিটি state আপডেটে চারটি কন্ট্রোল-পয়েন্টের স্থানাঙ্ক থেকে আবার হিসাব হয়। কোনো canvas বা বাইরের লাইব্রেরি নেই — ব্রাউজারের SVG রেন্ডারার সরাসরি পথটি আঁকে।
3
ব্রাউজারের CSS ইঞ্জিন easing-এর প্রিভিউ দেখায়
তিনটি লাইভ অ্যানিমেশন (একটি সরে যাওয়া বিন্দু, একটি প্রস্থ ট্রানজিশন এবং একটি স্কেল) cubic-bezier() মান ইনলাইনে বসিয়ে CSS @keyframes চালায়। ব্রাউজারের নিজস্ব অ্যানিমেশন ইঞ্জিন কার্ভটি ব্যাখ্যা করে, তাই আপনি যা দেখেন আপনার প্রোডাকশন CSS ঠিক তাই দেবে।
4
আপনার ফ্রেমওয়ার্কের সিনট্যাক্সে স্নিপেট কপি করুন
ট্যাবগুলো একই চারটি সংখ্যাকে CSS transition-timing-function, Tailwind arbitrary-value ক্লাস, Framer Motion ease অ্যারে বা anime.js easing স্ট্রিং হিসেবে ফরম্যাট করে। স্নিপেট navigator.clipboard দিয়ে ক্লিপবোর্ডে লেখা হয়। কার্ভটি URL hash-এও (#b=x1,y1,x2,y2) এনকোড হয়, তাই শেয়ার বা বুকমার্ক করতে পারেন।

বিনামূল্যে CSS Cubic-Bezier ইজিং জেনারেটর

সাধারণ ব্যবহার

কিভাবে কাজ করে

সম্পর্কিত টুলস

অডিও ফেড ইন/আউট

সাবটাইটেল এডিটর

CSS গ্রিড জেনারেটর

সচরাচর জিজ্ঞাসিত প্রশ্নাবলী