الرسوم المتحركة CSS Animations، شرح لكيفية تحريك العناصر في مواقع الويب
في الماضي عند بداية نشأة مواقع الويب كانت المواقع مقتصرة فقط على النصوص لتوضيح الفكرة فقط، ومع الوقت بدأت ظهور الصور والفيديوهات والوسائط المتعددة وتنسيق المواقع والاهتمام بالتصميم لتظهر المواقع بشكل عصري أكثر من ذي قبل.
وكانت لغة ال CSS هي المسؤولة عن كل هذا وأكثر ولكن مع الوقت والتطوير المستمر في اللغات والتقنيات المستخدمة في تطوير الويب، ظهرت خاصية في ال CSS خاصة بتحريك العناصر داخل الصفحة وتم تسميتها Animation.
تم اعتبار تحريك العناصر في الويب نقلة فريدة من نوعها فقد فتحت للمبرمجين مجالاً واسعاً للإبداع، وإضافة المزيد من الإثارة إلى المواقع.
عناصر الرسوم المتحركة Animations
ال Animations معناها الرسوم المتحركة ولكي يتم بناء الرسوم المتحركة بواسطة ال CSS وإدخالها في المواقع يتم استخدام شيئان رئيسيان وهما
1- الخاصية @keyframes: وهي العنصر المسؤول عن تحريك أي عنصر تريد تحريكه ولا يمكن الاستغناء عنها ويتم كتابتها كما يلي:@
;{ } keyframes theName@
2- خصائص الحركة Animation Properties: وهي خصائص مختلفة كل خاصية تقوم بمهمة مختلفة، وسوف نعرض كل خاصية مع مثال للتوضيح.
إقرأ أيضاً: أخطاء يقع فيها المبرمج المبتدئ إحذر منها!
خصائص الحركة Animation Properties
تكتب خواص الحركة بداخل العنصر المراد تحريكه وليس بداخل الخاصية @keyframes، وهذه هي أشهر خصائص الحركة وأكثرها إستخداماً.
1_ خاصية الإسم animation-name
2_ خاصية الوقت animation-duration
3_ خاصية التأخير animation-delay
4_ عدد التكرارات animation-iteration-count
5_ خاصية ضبط الإتجاه animation-direction
6_ خاصية animation-fill-mode
كل خاصية لها استخدام مختلف مثل animation-name هو كما واضح تقوم بتعيين إسم للعنصر، و animation-delay هو تأخير لوقت تشغيل العنصر.
إقرأ أيضاً: كيفية إنشاء موقع إلكتروني من الصفر في 2022 الدليل الشامل
التطبيق والممارسة (كيف وأين؟)
الرسوم المتحركة في تطوير الويب بحرها واسع وبها الآلاف من الإبتكارات التي ينتجها المطورون يومياً، وأنت أيضاً بعد أن تتعلم الأساسيات سوف تكون قادراً على الإبتكار وصنع Animations مميزة.
ولكن هذا لن يحدث إلا بالممارسة المثيرة والمتابعة للأعمال المختلفة الخاصة ب المصممين للحصول على التغذية البصرية التي تمكنك من إبتكار اشياء مميزة.
سوف أرشح لك في هذا القسم كورسات (دورات تعليمية) على اليوتيوب لتعلم اساسيات التحريك في CSS والتطبيق العملي عليها أيضاً.
1- كورس مكون من 13 درس باللغة الإنجليزية على قناة The Net Ninja
2- كورس شامل لتعلم ال CSS3 على القناة العربية ElzeroWebSchool سوف تجد به دروس تتناول شرح التحريك بشكل مفصل
إقرأ أيضاً: أفضل مواقع العمل الحر Freelance Websites
3- بعد أن تتعلم الأساسيات يأتي وقت الممارسة، وهنا دور هذه القائمة المكونة من عدة فيديوهات مختلفة لتحريكات متنوعة يمكنك تقليدها والتعديل عليها أيضاً.
وهنا نأتي إلى نهاية هذا المقال والذي شرحنا فيه ما هي الرسوم المتحركة Animations في لغة ال CSS3، مع الأمثلة وترشيح أفضل المصادر لتعلمها والتطبيق والممارسة أيضاً، اتمنى ان تكون قد استفدت ويرجى مشاركة المقال على منصات التواصل الاجتماعي حتى تعم الفائدة، وبالتوفيق.
