لقد ناقشنا في المقالات السابقة استخدامات وفوائد التحريك (Animation)، ووجدنا بعض مصادر الإلهام، وألقينا نظرة على الأدوات والمواقع التي قد تكون مفيدة في التطوير، وتعرّفنا على كيفية تطبيق حركة عبر نقل عنصر من حالة إلى أخرى (transitions).
هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:
- ما هي استخدامات الحركات؟
- تجهيز بيئة العمل لإنشاء الحركات
- مدخل إلى الانتقالات: التنقل بين الحالات
- مدخل إلى الحركات: مفهوم الحركة
- تطبيق عملي: الانتقالات
- خاصيات الانتقالات
- دوال التوقيت
- الانتقالات المتعددة
- الانتقالات وجافاسكربت
- تطبيق عملي: التحريكات
- خاصيات الحركات
- تطبيق عملي: الإطارات المفتاحية
- الحركات المتعددة المتزامنة
- موجز الحركات
- رواية القصص عبر الحركات
- حرب النجوم
- إظهار المحتوى أثناء التمرير
- سهولة الوصول
- نهاية الرحلة
في هذه الفقرة ستتعرّف على الخاصية animation.
التحريك في المتصفح
الانتقال (Transition) والتحريك (animation) متشابهان. فكلاهما يأخذ شكل خاصية CSS، ويحدث خلال مدة معيّنة، إضافة إلى خصائص أخرى للتحكم في كيفية إنشاء المتصفح للحركة.
في حين أنّ الانتقالات تدور حول جعل التغيير من الحالة "A" إلى الحالة "B" يبدوا سلسًا، فإنّ التحريكات هي وسيلة لوصف مراحل متعددة من الحركة.
التحريكات مفيدة لإنجاز الحركات المعقدة في المتصفح. في المثال أعلاه، هناك 3 حالات (A و B و C). الانتقال سينتقل من A إلى C وحسب، في حين تسمح لنا التحريكات بتحديد مرحلة وسطية B، بحيث يتم المرور على كل الخطوات الثلاث.
تتصرَّف التحريكات أيضًا بشكل مختلف قليلًا، إذ يمكنها أن تبدأ تلقائيًا. بينما قد يتطلب الانتقال إضافة صنف، أو تغييرًا في الحالة، مثل التحويم (hovering)، كما يمكن أن تبدأ التحريكات عند تحميل الصفحة.
هذا يعني أنه في حال رغبت في سرد قصة ما، أو لفت الانتباه إلى شيء ما على الصفحة، فالتحريكات خيار جيد.
أمثلة
تعد حركة الزر "Save" التي نراها في Codepen مثالًا جيدًا على التحريكات.
هذه الحركة تساعد الناس على ملاحظة الزر وتذكر ضرورة حفظ عملهم.
يتكون التأثير من سلسلة من الإطارات المفتاحية (keyframes) التي تخبر المتصفح أن يهُزّ الزر من اليسار إلى اليمين. سنتعمّق أكثر في هذا الموضوع في فقرة الإطارات المفتاحية بشكل عملي .
يمكننا أن نفعل الكثير من الأشياء عبر تحريك ونقل الإطارات المفتاحية عبر CSS. هذا مثال آخر ثلاثي الأبعاد:
المثال CSS Mac Plus متوفر على موقع CodePen، وهذا دليل مفصل لكيفية تصميمه.
الانتقال أم التحريك؟
تحدث الانتقالات عندما ينقل المتصفح عنصرًا من حالة إلى أخرى (من A إلى B) مما يوحي بحدوث حركة. يتم تطبيق ذلك عادةً نتيجة لحدث ما، مثل التحويم (hovering) فوق عنصر ما، أو إضافة صنف أو إزالته باستخدام JavaScript.
التحريكات أكثر دينامية، وتحدث تلقائيًا، وتتيح لك إنشاء تسلسل من التحريكات عبر عدد من الإطارات المفتاحية، ويمكن أن تُنفّذ خلال دورات (loops).
سنعود للخاصية animation لاحقًا.
تمرين
هل يمكنك التفكير في طرق لاستخدام التحريكات في صفحات الويب الخاصة بك؟ حاول أن تنتبه للتحريكات التي تحدث على المواقع التي تتصفحها. ابحث عن الأشياء التي تتحرك بطريقة مُلفتة. فعلى الأرجح أنها تحريكات.
إذا قمت بتنزيل ملفي HTML و CSS الابتدائيَين، فقم بإلقاء نظرة على الخاصية 'animation'. على عكس الانتقالات، تحتاج التحريكات إلى جزء ثانٍ يسمى الإطارات المفتاحية (keyframes). حاول تغيير بعض القيم وشاهد ما يحدث.
المصادر
- ترجمة وبتصرف للفصل animations من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.
اقرأ أيضًا
- المقالة التالية: تطبيق عملي: الانتقالات
- المقال السابقة: مدخل إلى الانتقالات: التنقل بين الحالات
- النسخة العربية الكاملة من كتاب: التحريك عبر CSS
أفضل التعليقات
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.