مولد CSS Cubic-Bezier

ما هي هذه الأداة؟

cubic-bezier() هي دالة توقيت في CSS تتحكم في كيفية تسارع القيمة المتحركة أو المنتقلة وتباطؤها عبر الزمن، بدلًا من التحرك بمعدل ثابت. تُعرَّف بنقطتي تحكم — (x1, y1) و(x2, y2) — تُقوّسان منحنى بين نقطة بداية ثابتة (0,0) ونقطة نهاية ثابتة (1,1). يجب أن تبقى قيم x بين 0 و1، لكن قيم y يمكن أن تتجاوز هذا النطاق لإنشاء تأثيرات تجاوز أو ارتداد.

عند الكتابة يدويًا، يستغرق ضبط أربعة أرقام عشرية للحصول على إحساس ليس فجًا ولا رخوًا الكثير من التجربة والخطأ. تستبدل هذه الأداة هذا التخمين بالتلاعب المباشر: اسحب شريط تمرير، وشاهد المنحنى ينحني والكرة في المعاينة تتحرك تبعًا لذلك، ثم انسخ الكود بمجرد أن تشعر بأن الحركة مناسبة.

المصدر: CSS Easing Functions Level 1، W3C — المواصفة التي تُعرّف cubic-bezier() والكلمات المفتاحية الخمس المسماة التي تستند إليها إعدادات هذه الأداة المسبقة.

لماذا تستخدمها؟

• يعرض الرسم البياني الحي بصيغة SVG بدقة كيف ينحني منحناك بين نقطتي البداية والنهاية الثابتتين، مع رسم نقطتي التحكم ومقابضهما لمزيد من الوضوح.
• يُحرّك زر التشغيل عنصر معاينة عبر مسار باستخدام منحناك الدقيق، لتشعر بالحركة لا أن تراها في رسم ثابت فقط.
• إعدادات مسبقة بنقرة واحدة لدوال التسارع القياسية الخمس المسماة — ease وease-in وease-out وease-in-out وlinear — كما هي موثقة في مواصفة CSS Easing Functions.
• يمكن لقيم y أن تنخفض دون 0 أو ترتفع فوق 1، ما يتيح لك بناء تأثيرات تجاوز/ارتداد لا يمكن للكلمات المفتاحية المسماة إنتاجها.
• يُخرج كود CSS جاهزًا للصق باسم transition-timing-function — نفس القيمة تعمل أيضًا مع animation-timing-function.
• تعمل بالكامل داخل متصفحك — لا شيء مما تضبطه يُرفع إلى أي مكان. مجانية، دون تسجيل.

كيفية الاستخدام

1. اسحب شريطي x1/y1 لضبط نقطة التحكم الأولى، التي تحدد كيفية بدء الحركة.
2. اسحب شريطي x2/y2 لضبط نقطة التحكم الثانية، التي تحدد كيفية انتهاء الحركة.
3. راقب المنحنى الأسود في الرسم البياني — منحنى يرتفع فوق القطر في البداية يعني أن الحركة تبدأ سريعة، ومنحنى يبقى تحته يعني أن الحركة تبدأ بطيئة.
4. اضغط تشغيل لرؤية عنصر معاينة يتحرك عبر المسار باستخدام منحناك كدالة transition-timing-function.
5. جرّب إعدادًا مسبقًا (ease، ease-in، ease-out، ease-in-out، linear) كنقطة بداية، ثم اضبط أشرطة التمرير انطلاقًا منه.
6. انسخ كود CSS المُولّد والصقه في قاعدة transition أو animation.

مثال

الإدخال

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

الناتج

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

هذه هي الكلمة المفتاحية القياسية ease في CSS مكتوبة كنقاط تحكم صريحة — بداية سريعة، تسارع حاد، ثم تباطؤ تدريجي نحو النهاية.

لماذا يمكن لقيم y أن تتجاوز 0–1

على عكس المحور x الذي يمثل الزمن ويجب أن يمتد من 0 إلى 1، يمثل المحور y تقدم القيمة المتحركة وليس له حد كهذا. ضبط y1 دون 0 أو y2 فوق 1 يجعل المنحنى ينخفض دون قيمة البداية أو يتجاوز قيمة النهاية قبل الاستقرار — وهذا هو أساس تأثيرات التجاوز والترقب المستخدمة في ضغطات الأزرار، وظهور النوافذ المنبثقة، وتفاعلات الواجهة الصغيرة المرحة. لا يمكن لأي من الكلمات المفتاحية الخمس المسماة (ease وease-in وease-out وease-in-out وlinear) إنتاج ذلك؛ تحتاج إلى cubic-bezier() مخصصة لذلك.

transition-timing-function مقابل animation-timing-function

تعمل قيمة cubic-bezier() التي تُولّدها هذه الأداة بشكل مطابق في كلا الخاصيتين. استخدم transition-timing-function عندما تُطلق الحركة بتغيير حالة (مثل تحويم الفأرة أو تبديل صنف)، وanimation-timing-function داخل قاعدة حركة مدفوعة بـ @keyframes عندما تحتاج نفس إحساس التسارع مطبقًا تلقائيًا أو في حلقة متكررة.

أنماط التسارع الشائعة

• استجابة واجهة سريعة (أزرار، مفاتيح تبديل): أبقِ نقاط التحكم قريبة من القطر مع ميل طفيف نحو ease-out، مثل cubic-bezier(0.4, 0, 0.2, 1).
• منحنى Material Design القياسي: cubic-bezier(0.4, 0, 0.2, 1) — بداية سريعة ونهاية هادئة، يُستخدم على نطاق واسع لانتقالات اللوحات والبطاقات.
• ارتداد/تجاوز: ادفع y2 فوق 1، مثل cubic-bezier(0.34, 1.56, 0.64, 1)، للحصول على إحساس ظهور مرح.
• الترقب قبل الحركة: ادفع y1 دون 0 حتى يتراجع العنصر قليلًا قبل التحرك للأمام.
• تسارع سلس ease-in-out للحركات المتكررة: أبقِ المنحنى قريبًا من التماثل حول المركز.

الاستخدام مع أدوات CSS الأخرى

نادرًا ما يقف منحنى التسارع وحده — عادةً ما يُطبَّق على عنصر يحتاج أيضًا إلى ظلال أو زوايا مستديرة أو تدرجات لونية مُعرّفة. أنشئ التنسيق المرئي بأدوات CSS الأخرى أدناه، ثم أضف دالة التوقيت من هذه الأداة إلى نفس القاعدة أو تصريح transition/animation.

→ Box Shadow Generator · Border Radius Generator

الأسئلة الشائعة