مولّد دوال تسارع CSS Easing
اسحب المقبضين لتشكيل منحنى تسارع مخصّص، شاهد الكرة تعاينه مباشرة، وانسخ
قيمة cubic-bezier().
إعدادات جاهزة
كيف تعمل
يرسم الرسم البياني التقدّم (عموديًا) مقابل الزمن (أفقيًا) على مدى ثانية واحدة.
كلا المقبضين قابل للسحب مباشرة، وحقول الأرقام أسفلهما تبقى متزامنة معهما في
الحالتين؛ اسحب بالماوس أو الإصبع، أو اكتب قيمًا دقيقة إذا احتجت لمطابقة منحنى
معيّن. تغذّي الأرقام الأربعة نفسها كلًا من مسار SVG الذي تراه و
transition-timing-function الفعلية المطبَّقة على كرة المعاينة،
لذا فما تراه هو التسارع الحقيقي، لا تقريب له.
كل شيء يعمل على محرك انتقال CSS الخاص بمتصفحك. لا تُرسل أي بيانات حالة حركة أو منحنى إلى أي مكان.
أسئلة شائعة
ما الذي تتحكم فيه المقبضان؟
يُعرَّف منحنى تسارع cubic-bezier بنقطتي تحكم، لكل منهما إحداثي x (الزمن، من 0 إلى 1) وإحداثي y (التقدّم، غير محدود لكنه عادة بين 0 و1). سحب مقبض يحدّد تلك النقطة مباشرة؛ والأرقام الأربعة الظاهرة هي بالضبط ما يوضع داخل cubic-bezier().
هل يمكن للمنحنى أن يتجاوز 100%؟
نعم، إذا تجاوزت قيمة y لنقطة تحكم 1 أو نزلت دون 0، فسوف تتجاوز الحركة قيمتها النهائية لفترة وجيزة أو تنخفض دون قيمتها الأولية قبل أن تستقر، وهو تأثير "الارتداد" أو "التمهيد المعاكس". اسحب مقبضًا فوق أو تحت الرسم البياني لتجربة ذلك.
هل يُرسل هذا إلى أي مكان؟
لا، يعمل المنحنى ومعاينة الحركة بالكامل داخل محرك CSS في متصفحك. لا شيء يُرفع.