Cubic-Bézier ইজিং এডিটর
ড্র্যাগযোগ্য এডিটর ও লাইভ অ্যানিমেশন প্রিভিউ দিয়ে কাস্টম cubic-bezier ইজিং কার্ভ ডিজাইন করুন।
ইজিং কার্ভ গঠন করতে দুটি হ্যান্ডেল টেনে নিন।
transition-timing-function: —;
animation-timing-function: —;
সবকিছু আপনার ব্রাউজারেই চলে — কিছুই আপলোড হয় না।
Cubic-Bézier ইজিং এডিটর সম্পর্কে
Cubic-Bézier Easing Editor CSS transition ও animation-এর জন্য কাস্টম timing function ডিজাইন করে। curve canvas-এ দুটি কন্ট্রোল হ্যান্ডেল টেনে নিয়ে যান এবং cubic-bezier(x1, y1, x2, y2) মানটি লাইভ আপডেট হয়; একটি animation প্রিভিউ একটি linear রেফারেন্সের পাশে easing চালায় যাতে আপনি পার্থক্যটি অনুভব করতে পারেন, একটি সামঞ্জস্যযোগ্য duration ও তাৎক্ষণিক replay সহ।
দশটি প্রিসেট সাধারণ শব্দভাণ্ডার কভার করে — প্রমিত ease, ease-in, ease-out ও ease-in-out, সাথে back এবং anticipate-এর মতো প্রকাশক curve যা তাদের endpoint অতিক্রম করে যায়, এবং material-স্টাইলের accelerate ও decelerate র্যাম্প। এগুলো যেমন আছে তেমন ব্যবহার করুন বা আপনার নিজস্ব কিছুতে টেনে নেওয়ার শুরুর বিন্দু হিসেবে ব্যবহার করুন।
আপনি সঠিক কন্ট্রোল-পয়েন্ট কোঅর্ডিনেটও টাইপ করতে পারেন, অনুপ্রেরণার জন্য randomize চাপতে পারেন, এবং সাদামাটা cubic-bezier() মান বা একটি রেডি-টু-পেস্ট CSS নিয়ম কপি করতে পারেন। পুরো এডিটরটি আপনার ব্রাউজারে চলে।
Cubic-Bézier ইজিং এডিটর কীভাবে ব্যবহার করবেন
- easing আকার দিতে curve এডিটরে দুটি হ্যান্ডেল টেনে নিয়ে যান।
- Replay-এ ক্লিক করুন এবং eased animation-কে linear রেফারেন্সের সাথে তুলনা করুন, প্রয়োজনে duration সামঞ্জস্য করুন।
- একটি দ্রুত শুরুর বিন্দুর জন্য প্রিসেট চেষ্টা করুন — ease, back, anticipate, material এবং আরও।
- সঠিক মানের জন্য সংখ্যাসূচক কন্ট্রোল-পয়েন্ট ইনপুট দিয়ে সূক্ষ্ম-সমন্বয় করুন।
- cubic-bezier() মান বা সম্পূর্ণ CSS snippet কপি করুন।