الأرقام الحقيقية وراء سهولة الدخول إلى CSS
صمم دالة توقيت CSS cube-bezier() مخصصة عن طريق سحب نقطتي تحكم، ومعاينتها مباشرة مقابل مرجع خطي، ثم انسخ القيمة الجاهزة.
النتيجة
تفتح هذه الصفحة مولد cube-bezier مع x1=0.42، y1=0، x2=0.58، y2=1 الذي تم تحميله بالفعل - نقاط التحكم الدقيقة التي تتوسع إليها الكلمة الرئيسية لتسهيل الدخول إلى CSS. اسحب أيًا من المقبضين، أو قم بتحرير الأرقام مباشرة، وسيتم تحديث المنحنى ومعاينة الرسوم المتحركة والسلسلة القابلة للنسخ على الفور.
إن Easy-in-out هي واحدة من الكلمات الرئيسية الخمس المضمنة لتوقيت CSS، وهي شائعة على وجه التحديد لأن هذا المنحنى يتسارع بلطف منذ البداية، ويحافظ على وتيرة متساوية إلى حد ما خلال المنتصف، ويتراجع مرة أخرى قبل النهاية - وهو الشكل الذي يبدو طبيعيًا بالنسبة لمعظم حركات واجهة المستخدم. إن رؤيتها كنقاط تحكم صريحة بدلاً من اسم الكلمة الرئيسية يجعل من الواضح السبب: يقع y1 بالقرب من 0 ويقع y2 بالقرب من 1، وكلاهما قريب من x المطابق لهما، لذلك لا يوجد تجاوز في أي من الاتجاهين.
استخدم هذه الأرقام الأربعة كنقطة بداية بدلاً من الكلمة الرئيسية نفسها عندما تحتاج إلى دفع الإحساس قليلاً - اسحب x1 لأسفل لبداية أكثر سرعة، أو ادفع y2 فوق 1 لتحويل هذا الشكل نفسه إلى تجاوز لطيف. يقوم كل تغيير بتحديث المعاينة والسطر cube-bezier() القابل للنسخ على الفور.