الأدوات · CSS · مولّد منحنى cubic-bezier
مولّد منحنى cubic-bezier
اسحب منحنى لبناء قيمة تسهيل cubic-bezier()، شاهدها تعمل مع انتقال CSS حي، وانسخ الكود.
أضف ملفًا وشغّل الأداة.
ملفك جاهز.
جرّب ملفًا آخر، أو أعد المحاولة.
الإعدادات
اضبط الإعدادات أدناه. تتحدّث النتيجة أثناء العمل.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي ملف.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي شيء إلى أي خادم، ولا يغادر جهازك.
كيف تعمل
اسحب المنحنى، أو اكتب أرقام X وY الأربعة مباشرة.
شاهد عرض الحركة الحي - يُشغّل انتقال CSS حقيقيًا بمنحناك.
انسخ قيمة cubic-bezier() الناتجة.
أسئلة شائعة
CSS يفرض ذلك - x هو الزمن، ولا يمكنه التراجع أو تجاوز نهاية الانتقال. y هي القيمة المستكملة، ويمكنها تجاوز 1 أو النزول تحت 0 بشكل مشروع، وهذا بالضبط ما يمنح منحنيات الارتداد إحساسها.
لا. المنحنى والرسم البياني وعرض الحركة كلها تُولَّد وتُعرَض بالكامل داخل متصفحك.
نعم. نفس قيمة cubic-bezier() تعمل في كلا الخاصيتين.
الشيء الحقيقي. تتحرك نقطة العرض بانتقال CSS حقيقي مضبوط بالضبط على قيمة cubic-bezier() الخاصة بك، لا بتقريب مكتوب يدويًا للرياضيات.
أدلة
نظرة أقرب على مشكلات محددة تحلّها هذه الأداة.
Why Easing Matters More Than Duration in UI Animation
Two transitions with the same duration can feel quick or sluggish depending only on their timing curve. What a cubic-bezier curve actually describes, and why the right one makes an interface feel responsive.
اقرأ الدليلHow to Create a Custom cubic-bezier() Easing Curve for CSS
Start from a preset, drag the two handles, compare the motion against linear and ease at the duration you will really use, and copy both the value and a ready transition line. The steps, with the limits the tool really has.
اقرأ الدليلAn Overshoot Menu Animation With ease-out-back, and Its Two Bugs
An ease-out-back curve makes a dropdown pop open and settle. It also makes the menu overshoot on the way closed, does nothing on opacity, and can poke out of a clipped container. The whole job, with the fixes.
اقرأ الدليل
التعليقات