مولد الرسوم المتحركة CSS

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

تحتوي الرسوم المتحركة CSS على نصفين يجب أن يتفقا. تسمي قاعدة @keyframes سلسلة من الخطوات، كل منها مكتوبة كنسبة مئوية مع قيم الخاصية التي يجب أن يحتفظ بها العنصر عند تلك النقطة، على سبيل المثال 0% عند العتامة 0 و100% عند العتامة 1. تشير خاصية الرسوم المتحركة بعد ذلك إلى اسم الإطار الرئيسي وتتحكم في كيفية تشغيله: كم من الوقت يستمر، وكيف يسهل، وكم من الوقت للانتظار قبل البدء، وكم مرة للتكرار، وفي أي اتجاه يتم تشغيل كل تمريرة. الاسم الذي به خطأ إملائي هو السبب الوحيد الأكثر شيوعًا لعدم قيام الرسوم المتحركة بأي شيء بصمت، لأن المتصفح ليس لديه قاعدة للارتباط بها.

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

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