CSS কিউবিক বেজিয়ার জেনারেটর

কার্ভটি নিচে-বামে (শুরু) থেকে উপরে-ডানে (শেষ) পর্যন্ত চলে, যেখানে সময় বাম থেকে ডানে এবং অগ্রগতি উপরের দিকে যায়। দুটি হ্যান্ডেল হলো কন্ট্রোল পয়েন্ট যা এটিকে বাঁকায় — প্রতিটির একটি X এবং একটি Y থাকে, তাই একসাথে তারা cubic-bezier(x1, y1, x2, y2)। X সবসময় ০ এবং ১-এর মধ্যে থাকে, যখন Y গতিকে ওভারশুট করতে বা স্থির হওয়ার আগে পেছনে টানতে উপরের দিকে বা নিচের দিকে যেতে পারে।

cubic-bezier() কপি করুন এবং যেখানে টাইমিং ফাংশন প্রয়োজন সেখানে পেস্ট করুন — transition-timing-function, animation-timing-function, অথবা শর্টহ্যান্ডে, যেমন: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)। ease, ease-in, ease-out এবং ease-in-out কিওয়ার্ডগুলো মূলত নির্দিষ্ট cubic-bezier কার্ভ, তাই এই প্রিসেটগুলোর যেকোনো একটি বেছে নিলে আপনি কিওয়ার্ডের পেছনের সঠিক মানটি দেখতে পাবেন।

শুধুমাত্র এটি দিয়ে সম্ভব নয়। একটি একক cubic-bezier পূর্বানুমান (anticipate) এবং ওভারশুট (overshoot) করতে পারে — "back" প্রিসেটগুলো ঠিক এটি করার জন্য একটি হ্যান্ডেলকে বক্সের বাইরে টেনে নেয় — তবে এটি কেবল একদিকে গিয়ে স্থির হতে পারে। বাউন্স (bounce) এবং ইলাস্টিক (elastic) ইফেক্ট বেশ কয়েকবার দিক পরিবর্তন করে, যা কোনো একক cubic-bezier প্রকাশ করতে পারে না; এগুলোর জন্য CSS keyframes বা অনেকগুলো স্টপ সহ linear() ফাংশন প্রয়োজন।