مولّد حركات CSS بالإطارات المفتاحية

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

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

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

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