عندما ترى الرمز “@” في ملف CSS، فإن ذلك يشير إلى استخدام خاصية تسمى “@keyframes”. هذه الخاصية تُستخدم لتحديد تسلسل الإطارات الرئيسيّة للتأثيرات الحركية في CSS، مثل الرسوم المتحركة.
بمعنى آخر، تعرف مجموعة المفاعيل (Keyframes) السلوك التدرجي الذي يمكن أن تأخذه عنصر ما أثناء تغيير خصائصه عبر فترة زمنية محددة، مثل التغيير التدريجي في الشفافية أو الحجم أو الموقع.
بالنظر إلى المثال المعطى، نرى استخدام “@keyframes” مع اسم محدد “loading-spinner-anim”. يُعرف هذا الاسم كمجموعة المفاعيل (Keyframes) المُراد تعريفها، وهو يمثل تسلسلًا من الإطارات الزمنية التي يمكن أن يمر بها عنصر واجهة المستخدم.
في الكود المعروض، تُعرَّف مفاعيل “loading-spinner-anim” باستخدام “@keyframes”. يُعرَّف فيها تغيير في خصائص العنصر عندما يتم تطبيق هذه المفاعيل. على سبيل المثال، يُحدد الكود المذكور أن عنصرًا بامتداد “loading-spinner-anim” يبدأ بشفافية كاملة (opacity: 1) في الإطار الأول (0%)، ثم يتغير تدريجياً إلى شفافية كاملة (opacity: 0) في الإطار الأخير (100%).
أما الفرق بين “@-webkit-keyframes” و”@keyframes”، فهو أن الأول يعمل في متصفحات WebKit مثل Safari و Chrome، في حين يُستخدم الثاني في المتصفحات الأخرى.
لاحظ أن “loading-spinner-anim” ليست عنصرًا فرعيًا أو “child”، بل هي ببساطة اسم تم تعريفه لمجموعة المفاعيل (Keyframes) والتي يمكن تطبيقها على أي عنصر في الصفحة دون الحاجة لكونها فرعية لعنصر آخر.
المزيد من المعلومات
مفاعيل CSS (CSS Keyframes) تعد واحدة من الأدوات الأساسية في إنشاء تأثيرات الرسوم المتحركة على الويب، وهي تسمح للمطورين بتحديد التغييرات التدريجية في خصائص العناصر عبر فترة زمنية. من خلال تعريف مجموعة من الإطارات الرئيسية (keyframes)، يتم وصف الحركة التي يجب أن تتبعها العناصر أثناء التأثير الحركي.
الاستخدام الأساسي لـ CSS Keyframes هو في إنشاء تأثيرات الرسوم المتحركة، مثل التحركات الدورانية، الظهور والاختفاء، والتأثيرات الانتقالية. فضلاً عن ذلك، يمكن استخدامها لتحسين تجربة المستخدم عبر الويب، بجعل العناصر تستجيب بشكل مرئي لإجراءات المستخدم، مثل تحويلاً للعناصر عند التمرير أو التفاعل مع العناصر بناءً على المدخلات.
الاستفادة الكاملة من مفاعيل CSS تأتي بالتزامن مع استخدام الخصائص الداعمة للتأثيرات الحركية، مثل “transform” و”opacity” و”transition” و”animation”، لإضفاء لمسة نهائية على التأثيرات وتعزيز الجمالية والوظائف.
على سبيل المثال، يمكن استخدام مفاعيل CSS لإنشاء تأثيرات تحميل جذابة، مثل تدوير عنصر أو تلاشيه تدريجياً. وفي هذا السياق، تظهر المفاعيل المعرفة بـ “@keyframes” كأداة فعالة في إنشاء تأثيرات التحميل والانتظار التي تجذب انتباه المستخدم وتعزز تجربة الاستخدام.
بشكل عام، يمكن القول إن مفاعيل CSS تعد إضافة قوية لأدوات تصميم وتطوير الويب، حيث تمكن المطورين من تعزيز تفاعل المستخدم مع المواقع وتحسين تجربتهم بشكل كبير. وبفضل قدرتها على إضافة لمسات إبداعية وحركية إلى العناصر الثابتة على الصفحة، فإن استخدام مفاعيل CSS يعد أحد الطرق الفعالة لجذب الانتباه وتحقيق تأثيرات بصرية مثيرة للاهتمام.
