الرسوم المتحركة CSS Animations، شرح لكيفية تحريك العناصر في مواقع الويب

CSS Animations

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، مع الأمثلة وترشيح أفضل المصادر لتعلمها والتطبيق والممارسة أيضاً، اتمنى ان تكون قد استفدت ويرجى مشاركة المقال على منصات التواصل الاجتماعي حتى تعم الفائدة، وبالتوفيق.

Similar Posts

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *