RevealTheme logo

Cubic Bezier অ্যাক্সিলারেশন কার্ভ জেনারেটর

CSS-এর জন্য cubic-bezier অ্যাক্সিলারেশন কার্ভ তৈরি করুন। স্ট্যান্ডার্ড প্রিসেট অন্তর্ভুক্ত।

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

এই টুলটি কীভাবে ব্যবহার করবেন

  1. 1

    Click a preset (ease, ease-in, ease-out, or ease-in-out) to load its four control values, or skip this to start from the default ease curve.

  2. 2

    Drag the a, b, c, and d sliders to adjust the two control points; each ranges from -1 to 2 in steps of 0.05 and the current value shows above the slider.

  3. 3

    Read the generated transition-timing-function: cubic-bezier(a, b, c, d); line in the output box.

  4. 4

    Copy that declaration by hand and drop it into your CSS transition or animation rule.

Cubic Bezier কার্ভ জেনারেটর কী?

CSS অ্যানিমেশন সময়ের সঙ্গে মান কীভাবে পরিবর্তিত হয় তা নিয়ন্ত্রণ করতে ইজিং (easing) ফাংশন ব্যবহার করে। cubic-bezier-এর চারটি প্যারামিটার (0,0) থেকে (1,1) পর্যন্ত একটি কার্ভ সংজ্ঞায়িত করে: কার্ভ যত খাড়া, সেই অঞ্চলে অ্যানিমেশন তত দ্রুত। সাধারণ প্রিসেটগুলি বেশিরভাগ প্রয়োজন মেটায়; কাস্টম কার্ভ একটি স্বতন্ত্র গতি তৈরি করে।

সাধারণ ব্যবহারের ক্ষেত্র

  • Tuning a button hover or focus transition so it feels snappy on entry and gentle on exit instead of using the generic default ease.

  • Designing a card or modal that overshoots slightly on open by pushing the d (P2 y) value above 1 for a subtle bounce.

  • Matching a brand motion spec where designers handed you specific cubic-bezier control points to reproduce in CSS.

  • Replacing a linear or default easing on a loading spinner or progress bar with a custom acceleration profile.

  • Quickly grabbing the canonical values behind ease-in-out without memorizing 0.42, 0, 0.58, 1.

  • Prototyping menu slide-in and drawer animations by comparing how ease-in versus ease-out change the perceived weight of the motion.

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

ease এবং ease-in-এর মধ্যে পার্থক্য কী?
ease প্রথমে ত্বরান্বিত হয় এবং তারপর মন্থর হয়। ease-in শুধু ত্বরান্বিত হয়। ease-out শুধু মন্থর হয়। ease-in-out উভয়ই করে, আরও স্পষ্টভাবে।
আমার কখন কাস্টম কার্ভ ব্যবহার করা উচিত?
যখন স্ট্যান্ডার্ড ইজিংগুলি সাধারণ মনে হয়। সূক্ষ্ম কাস্টম কার্ভ ব্র্যান্ডের নিজস্ব একটি গতি-পরিচিতি তৈরি করে।

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

কালার কনভার্টার (HEX/RGB/HSL)

HEX, RGB এবং HSL ফরম্যাটের মধ্যে রং রূপান্তর করুন। দৃশ্যমানভাবে একটি রং বেছে নিন বা মানগুলি ম্যানুয়ালি লিখুন।

CSS Box Shadow জেনারেটর

ভিজ্যুয়ালি CSS box-shadow মান তৈরি করুন। রিয়েল টাইমে প্রিভিউ দেখুন এবং তৈরি করা CSS কপি করুন।

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

লিনিয়ার ও রেডিয়াল CSS গ্রেডিয়েন্ট তৈরি করুন। ভিজ্যুয়ালি রং বেছে নিন এবং জেনারেট হওয়া CSS কপি করুন।

কালার প্যালেট জেনারেটর

যেকোনো বেস কালার থেকে সুসংগত কালার প্যালেট তৈরি করুন। কমপ্লিমেন্টারি, অ্যানালগাস, ট্রায়াডিক এবং মনোক্রোম্যাটিক স্কিম সমর্থন করে।

CSS Border Radius জেনারেটর

ভিজ্যুয়ালি জটিল CSS border-radius মান তৈরি করুন। প্রতিটি কোণের স্বাধীন নিয়ন্ত্রণ।

CSS Clamp() জেনারেটর

clamp() দিয়ে ফ্লুইড, রেসপন্সিভ CSS মান তৈরি করুন। ভিউপোর্ট রেঞ্জ জুড়ে ন্যূনতম ও সর্বোচ্চ সাইজের মধ্যে মসৃণভাবে স্কেল করে।

আপডেটের জন্য সাবস্ক্রাইব করুন

আমরা আপনার ইমেল বিক্রি করি না। আমরা স্প্যাম করি না।

© 2026 RevealTheme. All rights reserved.