التحريك في css خاصيات الحركات

قبل إعطاء المزيد من أمثلة التحريك، دعونا نلقي نظرة على خاصيات التحريك أولًا.

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

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

على غرار الخاصية transition، يمكن كتابة الخاصية animation باستخدام الصياغة المختزلة، أو يمكن تحديد أي من هذه الخاصيات بشكل منفرد.

الخاصية animation-delay

بشكل مشابه للخاصية transition-delay، يمكننا استخدام هذه الخاصية لجعل الحركة تنتظر قبل البدء. قد يكون ذلك مفيدًا في المواقف التي تحدث فيها عدة حركات.

إذا كانت الحركات تتكرر بشكل دوري، فلن ينطبق التأخير إلا على المرة الأولى. كما لن ينطبق التأخير سوى عند تطبيق الحركة على العنصر.

من الممكن إعطاء هذه الخاصية قيمة سالبة، مثل ‎-1s. سيؤدي ذلك إلى بدء الحركة كما لو أنّه قد مرّت ثانية من الزمن سلفًا.

الخاصية animation-direction

الحركات عادة ما تبدأ من 0٪ وتنتهي عند 100٪، حيث تمثل 0٪ نقطة بداية الحركة، وتمثل 100٪ نقطة النهاية. تأخذ الخاصية animation-direction القيم normal و reverse و alternate و alternate-reverse ، وتُستخدم للتحكم في اتجاه الحركة.

تؤدي القيمة reverse إلى جعل الحركة تحدث (وتدور) بشكل معكوس، أي من 100٪ إلى 0٪، بينما تجعل القيمة alternate الحركةَ تحدث من 0٪ إلى 100٪، وتعود مرة أخرى إلى 0٪.

الخاصية animation-duration

تمثل هذه الخاصية طول الحركة. على غرار transition-duration، تأخذ هذه الخاصية قيمة مثل 1s، التي تمثل ثانية واحدة، أو 200ms، التي تمثل مئتي ميلي ثانية.

الخاصية animation-fill-mode

بشكل افتراضي، بعد انتهاء التحريك سيعود العنصر إلى حالته الطبيعية. باستخدام animation-fill-mode يمكننا جعل الحركة تتجمد إما على الحالة النهائية، أو على حالة البداية.

يؤدي استخدام القيمة forwards إلى جعل الحركة تنتهي وتتوقف عند الإطار الرئيسي الأخير. فيما تعود القيمة backwards إلى الإطار الرئيسي الأول عندما تنتهي الحركة.

يمكنك مطالعة هذا المثال على Hop.ie. تحدث الحركة مرة واحدة، وتنتهي عند الإطار الأخير. وذلك بسبب استخدام القيمة forwards.

الخاصية animation-iteration-count

تمثل هذه الخاصية عدد مرات إجراء الحركة. افتراضيًا، ستُنفَّذ الحركة مرة واحدة. يمكنك تحديد رقم معيّن، أو استخدام القيمة infinite لتكرار تنفيذ الحركة إلى الأبد.

الخاصية animation-name

تشير الخاصية animation-name إلى الإطارات المفتاحية المرتبطة بالحركة. على سبيل المثال، إذا تم تعيين animation-name عند القيمة foo، فسيتم استخدام مجموعة الإطارات المفتاحية ذات الاسم foo المُعرّفة على النحو التالي:

@keyframes foo {
  ...
}

الخاصية animation-play-state

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

الخاصية animation-timing-function

تأخذ هذه الخاصية نفس القيمة التي تأخذها الخاصية transition-timing-function، ولكن مع اختلاف طفيف. فبينما تنطبق دوال التوقيت، مثل ease-out، على عملية الانتقال (transition) بأكملها، تنطبق دالة التوقيت الخاصة بالتحريك (animation) بين الإطارات المفتاحية.

هذا يعني أنّ الإطارات المفتاحية التالية ستشهد بداية سريعة للحركة ثم تتباطأ الحركة مع الاقتراب من 50٪، ثم تُسرَّع من جديد قبل أن تتباطأ مع الاقتراب من 100٪.

@keyframes foo {
  0% {
    /* ease-out التحريك يبدأ بسرعة ثم تجعله الدالة 
    % يتباطأ مع الاقتراب من 50   */
  }
  50% {
    /* مجددا يبدأ بسرعة ثم يتباطأ مع الاقتراب من %100 */
  }
  100% {
    /* النهاية*/
  }
}

هذا يمكن أن يكون مربكًا. أُفضّل عند إنشاء الحركات عبر الإطارات المفتاحية العمل بدالة التوقيت linear، ثم أتحكم في وتيرة الحركة باستخدام الإطارات المفتاحية.

رغم ذلك، فإنّ دوال التوقيت cubic-bezier يمكن أن تخلق بعض التأثيرات الرائعة عند استخدامها مع الحركات، لذلك جرّبها.

استخدام دوال التوقيت ضمن الإطارات المفتاحية

تجدر الإشارة إلى أنه عند تحديد دالة التوقيت الخاصة بالحركة، فستنطبق دالة التوقيت على كل إطارات الحركة المفتاحية.

هذا يعني أنه إذا أردت تحديد أربع إطارات مفتاحية، فستطُبّق دالة التوقيت على كلٍّ منها. فمثلًا، سوف تبطِّئ دالة التوقيت ease-out الحركة عند الاقتراب من نهاية كل إطار مفتاحي.

لهذا السبب، عادةً ما يُفضل استخدام دالة التوقيت linear، والتحكم في السرعة على أساس كل إطار على حدة:

@keyframes my-animation {
  0% {
  ...
  animation-timing-function: linear;
  }
  50% {
  ...
  animation-timing-function: ease-out;
  }
}

في هذه الحالة، سيكون النصف الأول من الحركة خطيًا، بينما يستخدم النصف الثاني دالة التوقيت ease-out.

تمرين

لقد أنشأت مثالًا توضيحيًّا على CodePen. الخاصيات مُدرجة في CSS. حاول تغيير بعض هذه الخاصيات لمعرفة ما سيحدث.

المصادر

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

اقرأ أيضًا

• المقالة التالية: تطبيق عملي: الإطارات المفتاحية
• المقالة السابقة: تطبيق عملي: التحريكات
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS