منشئ منحنى Cubic Bezier
جديدصمّم منحنى تسارع CSS بسحب نقاط التحكم، مع معاينة مباشرة.
Runs entirely in your browser. Nothing is uploaded.
صمّم منحنيات CSS للتخفيف بشكل مرئي
يحوّل هذا مولّد cubic-bezier القيمة المجردة cubic-bezier(x1, y1, x2, y2) إلى شيء يمكنك رؤيته والإحساس به. اسحب مقبضَي نقطة التحكم على الرسم البياني لتشكيل منحنى التسارع، وشاهد معاينةً مباشرة تتحرك بتلك التوقيتات بالضبط، ثم انسخ قيمة جاهزة للاستخدام في انتقالاتك ورسومك المتحركة CSS. إنه محرر منحنى التخفيف ومرئي cubic-bezier الكامل في أداة واحدة تعمل بالكامل في متصفحك — بلا تثبيت ولا حساب.
كل منحنى يمتد من (0,0) إلى (1,1). المحور الأفقي يمثل الوقت والمحور العمودي يمثل التقدم، لذا فإن المنحنى الذي يرتفع بسرعة في البداية يعني انطلاقًا سريعًا، والمنحنى الذي يتسطح قرب النهاية يعني نهاية سلسة. اكتب أرقامًا دقيقة في المدخلات الأربعة، أو اسحب المقابض، أو الصق قيمة cubic-bezier() موجودة لتحميلها وضبطها. تتحدث النتيجة في الوقت الفعلي مع كل تحريك للمقبض.
أكثر من 30 إعداداً مسبقاً: كلمات CSS الرئيسية ومنحنيات التخفيف المسماة
يجمع شريط الإعدادات المسبقة بين الشيئين اللذين ينفصلهما المنافسون عادةً. تحصل على كلمات CSS الرئيسية الخمس — linear وease وease-in وease-out وease-in-out — إضافةً إلى الكتالوج الكامل لـمنحنيات التخفيف المسماة التي نشرها easings.net: Sine وQuad وCubic وQuart وQuint وExpo وCirc وBack، كل منها في متغيرات In وOut وIn-Out. هذا يعني أن easeInOutCubic وeaseOutQuart وeaseOutBack وسائرها على بُعد نقرة واحدة، محوّلةً مسبقًا إلى قيمة css cubic-bezier.
يعرض كل إعداد مسبق صورة مصغرة للمنحنى لتتعرف على شكله بنظرة واحدة، ثم يحمّله مباشرةً في المحرر لتتمكن من تحسينه. لا يعدو Easings.net سوى قائمة بالأسماء وصور ثابتة — لا يمكن التحرير أو التصدير منه. يعرض cubic-bezier.com الكلمات الخمس الرئيسية لـCSS لكن لا يعرض مجموعة Penner الكاملة. هذه الأداة تمنحك الاثنين معًا، مع التحرير، في مكان واحد.
التجاوز والارتداد والاستباق
قيم y في cubic-bezier لا تقتصر على 0–1. ادفع مقبضًا فوق الصندوق وستتجاوز الرسوم المتحركة هدفها قبل الاستقرار — الإحساس المرن لـeaseOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). اسحب مقبضًا تحت الصندوق ويتراجع العنصر أولًا كالإعداد قبل القفز. يمتد الرسم البياني للمحرر خارج صندوق الوحدة لتتمكن من السحب إلى منطقة التجاوز ومشاهدة النتيجة فورًا.
يحتوي Chrome DevTools على محرر cubic-bezier مدمج، لكنه يقيّد المقابض داخل الصندوق 0–1، لذا لا يمكنك إنشاء تأثيرات تجاوز أو استباق هناك. Firefox DevTools لديه القيد ذاته. كلاهما يفتقر إلى كتالوج الإعدادات المسماة وخيارات التصدير المتاحة هنا. إذا كنت تحتاج إلى تجاوز، فهذه الأداة من بين الأدوات القليلة التي تدعمه فعلًا.
مقارنة مع أدوات cubic-bezier الأخرى
يُعدّ cubic-bezier.com لـLea Verou المرجع الذي نشر نظام السحب والمعاينة، ولا يزال ممتازًا لتوليد منحنيات CSS بسرعة. لكنه يفتقر إلى تصدير GSAP، وخرج دالة التخفيف JavaScript، ووضع المقارنة، ومكتبة إعدادات Penner، والواجهة تنهار على الأجهزة المحمولة. Easings.net مرجع للقراءة فحسب — تختار منحنىً مسمىً ويعرض القيم، دون محرر أو ضبط.
يتضمن Chrome وFirefox DevTools محررًا خفيف الوزن لـcubic-bezier داخل فاحص المتصفح، وهو مريح حين تعمل فيه. لكن المقايضة: لا يمكنك استخدامه دون فتح DevTools، ويقيّد المقابض عند 0–1 بلا تجاوز، ولا يصدّر كود GSAP أو JS، ولا يعمل على الأجهزة المحمولة إطلاقًا. يجمع مولّد UtiloKit المحررَ التفاعلي ومكتبةَ الإعدادات وأداةَ المقارنة وثلاثةَ صيغ تصدير في صفحة واحدة تعمل على أي جهاز.
معاينة مباشرة ومقارنة جنبًا إلى جنب
اضغط تشغيل ويتكرر عنصر تجريبي بمنحناك لتحكم على الحركة لا على الأرقام فحسب. بدّل التجربة بين translate وscale وopacity واضبط المدة لتطابق رسومك المتحركة الفعلية. فعّل المقارنة لوضع منحنى ثانٍ جانب الأول — مثالي لاختيار دالة توقيت الانتقال الصحيحة قبل تطبيقها في الإنتاج.
يتحكم شريط المدة في سرعة المعاينة من 200 مللي ثانية إلى 3 ثوانٍ، لاختبار شعور المنحنى ذاته بسرعات مختلفة. كثيرًا ما تكشف معاينة التصوير البطيء عن مشكلات — كتعثّر في البداية — غير مرئية عند 300 مللي ثانية. معظم الأدوات الأخرى بما فيها cubic-bezier.com تعرض المعاينة بسرعة ثابتة واحدة ولا تتيح مقارنة جنبًا إلى جنب.
تصدير إلى CSS وGSAP وJavaScript — مجاناً
انسخ ما يحتاجه مشروعك. تتيح لك علامة تبويب CSS سطر transition مختصرًا وكتلة رسوم متحركة @keyframes كاملة. تُخرج علامة تبويب GSAP استدعاءً لـCustomEase.create() حتى تطابق رسومك المتحركة GSAP المنحنى بدقة. تولّد علامة تبويب JS دالة تخفيف javascript cubic-bezier مستقلة — محلل Newton-Raphson يمكنك إدراجه في requestAnimationFrame أو أي tween دون تبعيات.
أعجبك منحنى؟ شاركه. تُشفّر الأداة القيم الأربع في URL الصفحة فيُعيد الرابط منحناك بالضبط على أي جهاز. كل شيء يعمل في متصفحك — لا يُرفع شيء ولا يُخزّن ولا يُسجّل — وهو مجاني تمامًا دون تسجيل.
Frequently asked questions
ما هو cubic-bezier في CSS؟
cubic-bezier() دالة تخفيف (توقيت) تعرّفها منحنى Bézier. تكتبها بالشكل cubic-bezier(x1, y1, x2, y2) في transition-timing-function أو animation-timing-function، ونقطتا تحكمها تثنيان المنحنى لتجعل الرسوم المتحركة تتسارع وتتباطأ بدلًا من التحرك بسرعة ثابتة. مثلًا، cubic-bezier(0.25, 0.1, 0.25, 1) مماثل تمامًا لكلمة CSS الرئيسية 'ease'.
كيف تعمل القيم الأربع في cubic-bezier؟
يُدرج cubic-bezier(x1, y1, x2, y2) نقطتَي تحكم: P1 = (x1, y1) تسحب بداية المنحنى وP2 = (x2, y2) تسحب نهايته. المنحنى نفسه يبدأ دائمًا من (0,0) وينتهي عند (1,1). قيم x تمثل الوقت ويجب أن تبقى بين 0 و1؛ قيم y تمثل التقدم ويمكن أن تنخفض دون 0 أو ترتفع فوق 1 لتأثيرات التجاوز.
ما الفرق بين ease وease-in وease-out وease-in-out؟
linear يتحرك بسرعة ثابتة دون تخفيف — يبدو غير طبيعي لمعظم الواجهات. ease — الافتراضي في CSS — يبدأ سريعًا نسبيًا ثم يتباطأ. ease-in يبدأ بطيئًا ويتسارع نحو النهاية ويُحسّ كسقوط شيء. ease-out يبدأ سريعًا ويتباطأ وهو الأكثر طبيعية للعناصر التي تظهر على الشاشة. ease-in-out بطيء في كلا الطرفين وأسرع في المنتصف، مثالي للعناصر التي تعبر الشاشة وتحتاج إلى توقف سلس.
هل يمكن أن تتجاوز قيم y في cubic-bezier الحد 1 أو تنخفض دون 0؟
نعم يمكن لقيم y ذلك، وهكذا تحصل على تأثيرات التجاوز والاستباق. قيم x (الوقت) تبقى دائمًا محددة بين 0 و1، لكن قيمة y فوق 1 تجعل العنصر يتجاوز هدفه ثم يعود كالنابض، في حين أن قيمة y دون 0 تجعله يتراجع أولًا. مثال كلاسيكي: easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1).
كيف أستخدم cubic-bezier في انتقال أو رسوم متحركة CSS؟
ضعه في خانة دالة التوقيت. للانتقال: transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);. لرسوم keyframe المتحركة: animation: slide 600ms cubic-bezier(0.33, 1, 0.68, 1) both;. تولّد علامة تبويب CSS في هذه الأداة كلا المقتطفين تلقائيًا بمنحناك ومدتك الحاليتين، لتنسخهما وتلصقهما مباشرةً في ورقة أنماطك.
كيف أحوّل تخفيفًا مسمىً مثل easeInOutQuad إلى cubic-bezier؟
حمّله من كتالوج الإعدادات المسبقة — لمنحنيات Penner / easings.net تقريباتٌ قياسية بـcubic-bezier. مثلًا: easeInOutQuad = cubic-bezier(0.45, 0, 0.55, 1)، وeaseOutCubic = cubic-bezier(0.33, 1, 0.68, 1)، وeaseInOutCubic = cubic-bezier(0.65, 0, 0.35, 1). اختر المنحنى المسمى من المعرض وانسخ القيمة مباشرةً إلى CSS.
هل هذا المولّد مجاني وخاص؟
مجاني تمامًا، لا تسجيل، ولا يُرفع شيء في أي مكان. محرر المنحنى والمعاينة المباشرة وتصدير CSS وGSAP وJavaScript تعمل محليًا في متصفحك. لا يُرسل أي شيء تنشئه إلى خادم، لذا يبقى عملك على جهازك تمامًا. يمكنك أيضًا مشاركة منحنى عبر رابط يشفّر القيم الأربع في URL — دون حاجة لحساب.
Related tools
عرض كل الأدوات
جديد خالط الألوان
امزج لونين بأي نسبة وانسخ النتيجة أو أي خطوة بينهما.
جديد منتقي ألوان الصور
اختر أي لون من صورة واستخرج لوحة ألوانها السائدة بصيغ HEX وRGB وHSL.
جديد Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
جديد Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
منتقي ومحوّل الألوان
اختر لونًا وحوّله بين HEX و RGB و HSL و OKLCH.
جديد مدقّق تباين الألوان
تحقّق من نِسب تباين WCAG من مستوى AA/AAA بين لون النص والخلفية.