مولد التخفيف CSS
مولد التخفيف في CSS مجاني عبر الإنترنت. اسحب نقطتي تحكم cubic-bezier على منحنى تفاعلي، واختر من بين 18 نمطًا جاهزًا، وشاهد معاينة بحركة كرة متكررة، وانسخ دالة التوقيت فورًا.
ما هي دالة التخفيف (easing) في CSS؟
تتحكم دالة التخفيف في إيقاع تقدم الحركة أو الانتقال عبر الزمن. لا يُلزم العنصر بالتحرك بسرعة ثابتة: قد يبدأ بطيئًا ثم يتسارع ويتجاوز الهدف ثم يستقر. في CSS تُضبط عبر خاصيتَي transition-timing-function أو animation-timing-function.
ماذا تعني الأرقام الأربعة في cubic-bezier()؟
يحدد cubic-bezier(x1, y1, x2, y2) منحنى عبر نقطتي تحكم. الأولى تشكل بداية الحركة والثانية نهايتها. يمثل X الزمن على مقياس من 0 إلى 1، ويمثل Y التقدم حيث يكون 0 هو القيمة الابتدائية و1 النهائية.
لماذا يجوز لـ Y الخروج من 0 إلى 1 بينما X لا؟
يقابل X الزمن الحقيقي، فالقيمة الأصغر من 0 أو الأكبر من 1 تكسر السببية وتحظرها المواصفة. أما Y فحر: فوق 1 يتجاوز الهدف، وأسفل 0 يتراجع أولًا قبل التقدم — وهكذا تخلق أنماط Back إحساس الارتداد.
ما الفرق بين ease وease-in وease-out؟
ease هي القيمة الافتراضية في المتصفح ببداية وهبوط ناعمَين، وease-in تبدأ بطيئة وتنتهي سريعة، وease-out تبدأ سريعة وتتباطأ، وease-in-out تجمع الاثنتين. يضم المولد أيضًا أنماط sine وquad وcubic وquart وexpo وback وmaterial — بجميعها 18 نمطًا.
كيف تعمل معاينة الكرة؟
تتحرك كرتان في حلقة مستمرة خلال المدة التي تحددها. الكرة العليا تتحرك دائمًا بدالة خطية كمرجع، والسفلى تتبع منحناك. تتسع الفجوة بينهما وتضيق لتُظهر تمامًا ما يغيّره التخفيف الخاص بك.
أين ألصق القيمة المولدة؟
استخدمها كقيمة لـ transition-timing-function أو animation-timing-function، مثل transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. يخرج الأداة دالة cubic-bezier(...) الخام جاهزة لأي قاعدة.
هل تؤثر دالة التخفيف على أداء الحركة؟
دالة التوقيت نفسها بلا كلفة: تعيد فقط توزيع التقدم على الزمن. يعتمد الأداء على الخصائص التي تحركها: transform وopacity صديقتان للمعالج الرسومي، بينما تحريك خصائص التخطيط مثل width أو top يسبب إعادة تدفقات مكلفة أيًا كان التخفيف.
هل يمكن صنع تأثير ارتداد أو مرونة حقيقي؟
يمكن لمنحنى cubic-bezier واحد التجاوز مرة واحدة فقط، ولا ينتج الارتدادات المتعددة لتأثير الارتداد أو المرونة الحقيقي. لذلك اربط عدة إطارات مفتاحية في @keyframes أو استخدم Web Animations API؛ أما التجاوز الواحد الناعم فهو ما يجيده cubic-bezier ويقدمه هذا المولد.
هل يُرفع ما أفعله هنا إلى أي مكان؟
لا. يُرسم المنحنى على canvas محلي وتعمل حركة المعاينة بالكامل داخل متصفحك. لا يُرسل شيء إلى أي خادم، لذا يعمل المولد دون اتصال بعد تحميل الصفحة.
كيفية استخدام مولد التخفيف CSS
انحت منحنيات التيسير في CSS بصريًا بدلًا من تخمين الأرقام. اسحب نقاط التحكم، وقارن حركتك بمرجع خطي، وانسخ قيمة cubic-bezier الجاهزة بنقرة واحدة. كل شيء يعمل محليًا في متصفحك.
- اختر أحد الإعدادات الجاهزة الثمانية عشر نقطة انطلاق، مثل Ease Out أو Expo Out أو Back Out.
- اسحب المقبضين على المنحنى: المحور X هو الزمن ويجب أن يبقى بين 0 و1، والمحور Y هو التقدم ويجوز أن يتجاوز.
- اضبط إحداثيات P1 وP2 الدقيقة بحقول الأرقام إذا احتجت دقة.
- اضبط منزلق المدة وراقب الكرتين المتكررتين — المجوّفة خطية دائمًا، والمصمتة تستخدم منحناك.
- انسخ قيمة cubic-bezier المولدة إلى transition-timing-function أو animation-timing-function.
ادفع أحد مقابض Y فوق 1 لتجاوز واثق، مثل cubic-bezier(0.34, 1.56, 0.64, 1) — يجعل الأزرار والبطاقات مرنة كالزنبرك دون أي إطارات مفتاحية.
أدوات ذات صلة
- مولد تدرجات CSS أنشئ تدرجات CSS مذهلة بصريًا. أنشئ تدرجات خطية وشعاعية ومخروطية مع نقاط ألوان متعددة وزوايا ومواضع مخصصة. انسخ كود CSS الجاهز للإنتاج فورًا.
- مولد مؤشرات التحميل CSS مولد مؤشرات تحميل CSS مجاني: عشرة مؤشرات بـ CSS خالصة مع تحكم مباشر في الحجم والسرعة والسماكة واللون، ونسخ HTML وCSS جاهزين للّصق.
- مولد الحواف الدائرية الإبداعية مولد حواف دائرية إبداعي مجاني عبر الإنترنت. اسحب المقابض الثمانية أو اختر شكلًا جاهزًا لإنشاء أشكال CSS عضوية ونسخ الكود فورًا.
- محول الألوان محول ألوان مجاني عبر الإنترنت. تحويل فوري لتنسيقات HEX و RGB و HSL و HSV مع منتقي بصري. 100% خاص، يعمل في متصفحك.
- مولد ظل النص CSS مولد text-shadow في CSS مجاني عبر الإنترنت. رصّ طبقات ظل متعددة مع الإزاحة والضبابية واللون والشفافية، جرّب أنماطًا جاهزة مثل النيون وثلاثي الأبعاد والريترو، وانسخ كود CSS فورًا.
- مولد clip-path في CSS مولد clip-path في CSS مجاني عبر الإنترنت. صمم أشكال polygon وcircle وellipse وinset بنقاط قابلة للسحب، مع معاينة مباشرة ونسخ كود CSS بنقرة واحدة.
- مجمّل CSS نسق وجمّل كود CSS فوراً. حوّل CSS المضغوط إلى كود مقروء ومنسق جيداً مع خيارات قابلة للتخصيص.
- ضاغط CSS ضاغط CSS مجاني عبر الإنترنت. ضغط وحسّن كود CSS فوراً عن طريق إزالة المسافات والتعليقات والأحرف غير الضرورية. قلل حجم الملف لأداء ويب أسرع.