التحريك في css موجز الحركات

لقد غطينا الكثير من التفاصيل في المقالات السابقة وأرجو أن يكون كل شيء واضحًا الآن.

عندما بدأت تعلم إنشاء الحركات في CSS، لم تكن مفاهيم التحريك والإطارات المفتاحية (keyframes) واضحة لي. إذا شعرتَ أنّ مفاهيم التحريك غير واضحة حتى الآن، فلا تقلق. استمر في الدراسة والتعلم والتجريب، وستتضح شيئًا فشيئًا حيل ومفاهيم التحريكات في HTML و CSS.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

سنلخّص في هذه المقالة ما تعلمناه في المقالات السابقة. لكن سنعود أولًا إلى التمرين الذي رأيناه في المقالة الماضية.

تمرين: إشارات المرور

يُفترض أن يكون التمرين سهلًا. طبعًا على افتراض أنك تعرف كيف تحلّه. لقد أنشأت نسخة محدّثة من مثال إشارات المرور وفق نموذج المملكة المتحدة، إذ غيَّرت التسلسل هذه المرة لإزالة مرحلة "الأحمر + البرتقالي" ليوافق نظام إشارات المرور الأمريكية.

يمكنك الاطلاع عليه من هنا. لقد جعلت نظام الألوان يطابق شكل إشارات المرور الأمريكية.

موجز: الحركات

في هذا القسم، سنلقي نظرة على الخاصية animation، وكيف تعمل مع الإطارات المفتاحية (keyframes).

الخاصية transition

رغم أنَّ الخاصية animation تعمل بطريقة مشابهة للخاصية transition، إلا أنَّها تختلف عنها قليلًا. ففي حين أنّ الانتقال (transition) لن يحدث الا عند تغيُّر العنصر، فإنّ الحركات (animations) يمكن أن تبدأ مباشرةً.

باستخدام مختلف الخاصيات، يمكن تكرار الحركات عددًا معينًا من المرات (أو إلى الأبد)، كما يمكن أن تبدأ بتأخير سالب، وهذا سيبدأ الحركة بعد أن تكون قد بدأت معالجتُها.

افتراضيًا، تحدث الحركات من البداية إلى النهاية، ثم تقفز إلى حالتها الافتراضية. يمكننا تجميد الحركة في حالتها النهائية بإعطاء الخاصية animation-direction القيمةَ forwards.

تستخدم الحركات دوال التوقيت مثلها مثل الانتقالات. بيْد أنّ دوال التوقيت تنطبق على كل إطار رئيسي على حدة، وليس على كامل مجموعة الإطارات المفتاحية. يمكنك أيضًا تحديد قيمة animation-timing-function داخل الإطار المفتاحي لتتحكم بشكل أدق في الحركة.

أخيرًا، يمكن صياغة الحركات بشكل مختصر كما هو الحال مع الانتقالات:

animation: keyframe-name 2s forwards linear;

الإطارات المفتاحية

من الضروري أن تشير كل حركة إلى مجموعة من الإطارات المفتاحية (keyframes). هذه الإطارات هي عبارة عن سلسلة من النسب المئوية التي تصف كل "مرحلة" من مراحل الحركة. سيملأ المتصفح الفجوات تلقائيًا.

الإطارات المفتاحية لها اختصاراتها الخاصة (to و from)، والتي يمكنك استخدامها عندما تريد الاكتفاء بالانتقال من حالة إلى أخرى.

يمكن أن يؤدي سرد النسب المئوية بجانب بعضها بعضًا إلى "توقف" الحركة في تلك المرحلة.

أخيرًا، من الممكن حذف الإطار المفتاحي ‎0%، وسوف يفترض المتصفح حينها أنّ تنسيق العنصر هو الحالة الابتدائية. على سبيل المثال، لجعل عنصر ما يتلاشى (fade away)، لا يلزم بالضرورة أن تكون قيمة عتَامته (opacity) مساوية لـ 1 في البداية (على افتراض أنّ العنصر مرئي):

@keyframes name {
  100% {
    opacity: 0;
  }
}

تجميع الحركة

عندما نريد استخدام الحركة، سيكون لدينا دائمًا الجزءان التاليان:

.element {
  animation: keyframe-name ...
}
@keyframes keyframe-name {
  ...
}

تمرين

في هذه المرحلة، يجب أن تكون قادرًا على التفريق بين خاصيتي الحركة (animation) والانتقال (transition).

ألق نظرة على أمثلة Principles of Animation for the Web. كل تلك الأمثلة مصنوعة حصرًا باستخدام HTML و CSS، وذلك باستخدام إطارات الحركة المفتاحية. حاول أن تنسخها، وقُم بالتجريب والتعديل عليها.

المصادر

• ترجمة وبتصرف للفصل animation recap من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: رواية القصص عبر الحركات
• المقالة السابقة: الحركات المتعددة المتزامنة
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS