مولد الانتقال CSS

يعد CSS Transition Generator محررًا مرئيًا لخاصية انتقال CSS. يمكنك اختيار الخاصية التي تريد تحريكها، وتعيين المدة، واختيار وظيفة التوقيت، وإضافة تأخير، ثم تشغيل معاينة مباشرة لمشاهدة السهولة الدقيقة قبل نسخ الإعلان. يمكنك وضع عدة انتقالات في اختصار واحد - على سبيل المثال، تلاشي العتامة أثناء نقل التحويل - وتحصل كل طبقة على خصائصها ومدتها وتوقيتها وتأخيرها.

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

كل شيء يحدث في متصفحك. ابدأ من إعداد مسبق مثل Fade أو Button hover أو Bounce، واضبط أشرطة التمرير وحدد، واضغط على مشغل المعاينة لرؤية الحركة، وانسخ الاختصار. تكتب الأداة الأجزاء الأربعة بالترتيب الذي تتطلبه المواصفات - الخاصية، والمدة، ووظيفة التوقيت، والتأخير - وتحذف التأخير عندما يكون صفرًا. لا يوجد حساب ولا تحميلات، ويستمر في العمل دون اتصال بالإنترنت بمجرد تحميل الصفحة.

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