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

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

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

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

تعمل خمسة إعدادات مسبقة - الارتداد والاهتزاز والنبض والتلاشي والانزلاق - على تحميل مخطط زمني كامل وجاهز للتعديل (بما في ذلك مدة معقولة ووظيفة التوقيت وعدد التكرارات) بنقرة واحدة. اضغط على "تشغيل" في أي وقت لرؤية الرسوم المتحركة CSS الحقيقية تعمل على عنصر المعاينة، والتي تم إنشاؤها بسرعة من خلال ورقة أنماط تم إدخالها ديناميكيًا، ثم انسخ كتلة @keyframes الكاملة بالإضافة إلى الاختصار .animated-element { Animation: ... } مباشرةً في مشروعك الخاص. مثل كل الأدوات الموجودة على هذا الموقع، يتم تشغيلها محليًا في المتصفح دون تحميل أي شيء على الإطلاق.