اقرأ في هذا المقال
- مفهوم الحركات في لغة البرمجة CSS
- كيفية تجهيز بيئة العمل في لغة البرمجة CSS لاستخدام مفهوم الحركات
- مفهوم الانتقالات في لغة البرمجة CSS
مفهوم الحركات في لغة البرمجة CSS
تدعم لغة البرمجة (CSS) مفهوم الحركات، والذي له أهمية كبيرة جداً في مجال لغات البرمجة المختلفة، حيث أنه يضفي الحيوية على المواقع التي تستخدم مفهوم الحركات (animation)، كما أن هذه التقنية تساعد في الابتعاد عن السكون الممل ولفت إنتباه المستخدمين، وتحسن من التواصل من المستخدمين والزائرين للمواقع الإلكترونية، لذلك أصبحت الحركات أمراً جوهرياً لا يمكن الإستغناء عنه في مختلف مواقع الويب.
كيفية تجهيز بيئة العمل في لغة البرمجة CSS لاستخدام مفهوم الحركات
هناك طريقتين لاستخدام الحركات في لغة البرمجة (CSS) وهما:
التطوير في المتصفح
حيث أن أبسط طريقة لاستخدام الحركات في لغة (CSS) هي القيام بالتجارب عن طريق استخدام الإنترنت، حيث أن في الغالب يتم استخدام منصة تسمى (CodPen) وهي عبارة عن منصة برمجية تسمح للمستخدمين من إجراء تغييرات على الكودات البرمجية المكتوبة بلغة (HTML)، ولغة (CSS) و (JavaScript).
التطوير المحلي
حيث يتم إنشاء ملفين (HTML) و (CSS) ويتم ربطهم مع بعضهم البعض ومن ثم يتم استخدام الحركات، وفيما يلي أهم الدوال التي تستخدم مع الحركات في لغة البرمجة (CSS):
| الدالة | الاستخدام |
| transition | حيث تستخدم في ضبط قيم الخاصيات (transition-property) و (transition-delay). |
| transition- delay | حيث تقوم هذه الدالة بتحديد الزمن الذي يجب انتظاره بين وقوع الحدث الذي سيؤدي إلى بدء تأثير الانتقال وبين بداية التأثير. |
| transition- duration | تقوم هذه الدالة بتحديد الزمن الذي سيستغرقه تأثير الانتقال للوصول إلى القيمة النهائية للخاصية. |
| transition- property | حيث تستعمل هذه الدالة لتحديد أسماء خاصيات (CSS) التي ستخضع لتأثير الانتقال. |
مفهوم الانتقالات في لغة البرمجة CSS
الانتقالات هي إحدى الطرائق التي تتيحها لغة البرمجة (CSS)، حيث تستخدم للتحكم في الحركة داخل المتصفح، حيث أن الانتقال يعني الانتقال من حالة إلى حالة أخرى، وفيما يلي أهم الدوال التي تستخدم مع الانتقالات في لغة البرمجة (CSS):
| الدالة | الاستخدام |
| animation | وهي عبارة عن دالة تقوم بضبط قيم مختلف خاصيات (CSS) المتعلقة بالحركات وهي (animation-name) و (animation- timing) و (animation-delay). |
| animation- delay | تقوم هذه الدالة بتحديد متى ستبدأ الحركة. |
| animation- duration | تقوم هذه الدالة بتحديد الزمن اللازم لإكمال دورة كاملة من الحركة. |
| animation- name | تستخدم لتحديد أسماء الحركات التي ستُطبَّق على العنصر. |
