الصور المتحركة

The CSS Podcast - 022: Animation

تظهر أحيانًا أدوات مساعدة صغيرة على الواجهات، وعند النقر عليها، توفّر معلومات مفيدة عن ذلك القسم المحدّد. غالبًا ما تتضمّن هذه العناصر رسومًا متحركة نابضة لإعلامك بشكل غير مباشر بوجود المعلومات وضرورة التفاعل معها. توضّح لك هذه الوحدة كيفية إنشاء هذه العناصر المساعِدة والصور المتحركة الأخرى باستخدام CSS.

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

ما هو المفتاح الرئيسي؟

في معظم أدوات الرسوم المتحركة، تكون اللقطات الرئيسية هي الآلية التي تستخدمها لتحديد حالات الرسوم المتحركة للطوابع الزمنية على مخطط زمني.

على سبيل المثال، إليك مخطط زمني للنقطة "المساعد" النابضة. يتم تشغيل الصورة المتحركة لمدة ثانية واحدة وتتضمّن حالتَين.

هناك نقطة محدّدة تبدأ عندها كل حالة من حالات الحركة وتنتهي عندها. يمكنك تحديد هذه العناصر على المخطط الزمني باستخدام الإطارات الرئيسية.

@keyframes

Browser Support

• 43
• 12
• 16
• 9

Source

تستند @keyframes CSS إلى المفهوم نفسه المستخدَم في الإطارات الرئيسية للصور المتحركة.

في ما يلي مثال على حالتَين:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

الجزء الأول المهم هو المعرّف المخصّص (custom-ident)، وهو اسم قاعدة اللقطات الرئيسية. المعرّف في هذا المثال هو my-animation. يعمل المعرّف المخصّص مثل اسم دالة، ويسمح لك بالإشارة إلى قاعدة الإطارات الرئيسية في مكان آخر من رمز CSS.

ملاحظة: يتم استخدام الرمز <custom-ident> في أماكن مختلفة في CSS للسماح لك بتقديم اسمك الخاص للعناصر. تكون هذه المعرّفات حسّاسة لحالة الأحرف، وفي بعض الحالات، هناك كلمات لا يمكنك استخدامها. على سبيل المثال، عند تسمية الأسطر في CSS Grid، لا يمكنك استخدام الكلمة span.

في قاعدة اللقطات الرئيسية، from وto هما كلمتان رئيسيتان تمثّلان 0% و 100%، وهما بداية الحركة ونهايتها. يمكنك إعادة إنشاء القاعدة نفسها على النحو التالي:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

يمكنك إضافة أي عدد تريده من الوظائف خلال الإطار الزمني. في مثال موفِّر الوميض، هناك حالتان تُترجم إلى مقطعَيّ مرجع رئيسيَّين. وهذا يعني أنّ لديك موضعَين داخل قاعدة اللقطات الرئيسية ل represent the changes for each of these keyframes.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

مواقع animation

Browser Support

• 43
• 12
• 16
• 9

Source

لاستخدام @keyframes في قاعدة CSS، يمكنك تحديد سمات التأثيرات المختلفة بشكل فردي، أو استخدام السمة المختصرة animation.

animation-duration

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-duration: 10s;
}

تحدِّد السمة animation-duration مدّة مخطط @keyframes الزمني كقيمة زمنية. يتم ضبطه تلقائيًا على 0 ثانية، ما يعني أنّه سيستمر تشغيل المؤثر المتحرك، ولكن سيكون سريعًا جدًا لمشاهدته. لا يمكنك استخدام قيم وقت سالبة.

animation-timing-function

Browser Support

• 43
• 12
• 16
• 9

Source

للمساعدة في إعادة إنشاء الحركة الطبيعية في الرسوم المتحركة، يمكنك استخدام دوال التوقيت التي تُحتسب سرعة الرسوم المتحركة في كل نقطة. غالبًا ما تكون القيم المحسوبة منحنية، ما يؤدي إلى تشغيل الصورة المتحركة بسرعات متغيرة على مدار animation-duration، ويجعل العنصر يبدو وكأنه يرتدّ إذا احتسب المتصفّح قيمة تتجاوز القيم المحدّدة في @keyframes.

تتوفّر عدة كلمات رئيسية كإعدادات مسبقة في CSS، ويتم استخدامها كقيمة لسمة animation-timing-function: linear وease وease-in وease-out وease-in-out.

.my-element {
    animation-timing-function: ease-in-out;
}

تبدو قيم دالة التخفيف منحنية لأنّ التخفيف يتم احتسابه باستخدام منحنى Bézier، وهو نوع من الدوالّ المستخدَمة لوضع نماذج للسرعة. تشير كلّ من الكلمات الرئيسية للدوالّ المتعلّقة بالتوقيت، مثل ease، إلى منحنى Bézier محدّد مسبقًا. في CSS، يمكنك تحديد منحنى Bézier مباشرةً باستخدام الدالة cubic-bezier()، التي تقبل أربع قيم رقمية: x1 وy1 وx2 وy2.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

ترسم هذه القيم كل جزء من المنحنى على طول محورَي X وY.

إنّ فهم منحنيات Bézier أمر معقّد. إنّ الأدوات المرئية، مثل أداة الإنشاء التي أنشأتها Lea Verou، مفيدة جدًا.

دالة التخفيف steps

في بعض الأحيان، قد تحتاج إلى التحكّم بشكل أدق في الصورة المتحركة من خلال التحرّك على فترات بدلاً من التحرك على منحنى. تتيح لك دالة steps() easing تقسيم المخطط الزمني إلى فواصل زمنية محدّدة بمدّة متساوية.

.my-element {
    animation-timing-function: steps(10, end);
}

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

الوسيطة الثانية هي الاتجاه. إذا تم ضبطه على end، وهو الإعداد التلقائي، تنتهي الخطوات في نهاية المخطط الزمني. إذا تم ضبطه على start، تنتهي الخطوة الأولى من الرسم المتحرك فور بدئه، ما يعني أنّه ينتهي خطوة واحدة قبل end.

animation-iteration-count

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-iteration-count: 10;
}

تحدِّد السمة عدد-مرات-تكرار-الصورة-المتحرّكة عدد المرات التي يجب تشغيل المخطط الزمني @keyframes فيها أثناء الصورة المتحركة. يكون هذا الخيار تلقائيًا 1، ما يعني أنّ الصورة المتحركة تتوقف عند بلوغ نهاية المخطط الزمني. لا يمكن أن تكون هذه القيمة رقمًا سالبًا.

لتشغيل الصورة المتحركة بشكل متكرّر، اضبط عدد التكرارات على infinite. في ما يلي كيفية عمل المؤثر المتحرك النبضي الذي ظهر في بداية هذا الدرس.

animation-direction

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-direction: reverse;
}

يمكنك تحديد الاتجاه الذي يتم تشغيل المخطط الزمني فيه على الإطارات الرئيسية باستخدامanimation-direction، الذي يأخذ القيم التالية:

• ‫normal: القيمة التلقائية، وهي "إلى الأمام"
• reverse: للرجوع إلى الوراء في المخطط الزمني
• alternate: مع كل تكرار للحركة، يبدّل المخطط الزمني بين التشغيل إلى الأمام والتشغيل إلى الخلف.
• alternate-reverse: مثل alternate، ولكن يبدأ المشهد المتحرك مع تشغيل المخطط الزمني للخلف.

animation-delay

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-delay: 5s;
}

تحدِّد السمة animation-delay المدة التي ينتظرها المتصفّح قبل بدء الحركة. مثل السمة animation-duration، يقبل هذا الحقل قيمة زمنية.

على عكس animation-duration، يمكنك تحديد animation-delay كقيمة سالبة، ما يجعل الرسم المتحرك يبدأ في النقطة المقابلة في المخطط الزمني. على سبيل المثال، إذا كانت الصورة المتحركة مدتها 10 ثوانٍ وضبطت animation-delay على -5s، ستبدأ الصورة المتحركة من منتصف المخطط الزمني.

animation-play-state

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element:hover {
    animation-play-state: paused;
}

تتيح لك الخاصية animation-play-state تشغيل الصورة المتحركة وإيقافها مؤقتًا. تكون القيمة التلقائية running. في حال ضبطه على paused، يتم إيقاف الصورة المتحركة مؤقتًا.

animation-fill-mode

Browser Support

• 43
• 12
• 16
• 9

Source

تحدِّد السمة animation-fill-mode القيم التي تبقى في المخطط الزمني @keyframes قبل بدء التأثير المتحرك أو بعد انتهائه. القيمة التلقائية هي none، ما يعني أنّه عند اكتمال الصورة المتحركة، يتم تجاهل القيم في المخطط الزمني. تشمل الخيارات الأخرى ما يلي:

• forwards: يتم الاحتفاظ بالإطار الرئيسي الأخير استنادًا إلى اتجاه الصورة المتحركة.
• ‫backwards: يبقى الإطار الرئيسي الأول ثابتًا استنادًا إلى اتجاه الصورة المتحركة.
• both: يبقى كل من الإطار الرئيسي الأول والأخير.

اختصار animation

بدلاً من تحديد كل سمة على حدة، يمكنك تحديدها باستخدام اختصار animation، ما يتيح لك تحديد سمات الصور المتحركة بالترتيب التالي:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

نقاط يجب مراعاتها عند العمل مع الصور المتحركة

يمكن للمستخدمين ضبط نظام التشغيل على استخدام الإعداد "تقليل الحركة" عند التفاعل مع التطبيقات والمواقع الإلكترونية. يمكنك رصد هذا الخيار المفضّل باستخدام طلب الوسائط prefers-reduced-motion:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

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

التحقّق من فهمك

اختبِر معلوماتك حول الصور المتحركة

هل الاسم أو المعرّف المخصّص للحركة @keyframes الحسّاسة لحالة الأحرف؟

نعم

🎉

لا

لا تسمح CSS بأن يكون لاثنين من الصور المتحركة الاسم نفسه، ولكنها تسمح بوجود SWOOP وswoop معًا.

الكلمات الرئيسية from وto متطابقة مع:

‫start، end

يُرجى إعادة المحاولة.

‫0%، 100%

from هي نفسها 0% وto هي نفسها ‎100%.

0 و1

يُرجى إعادة المحاولة.

يُعرف animation-timing-function أيضًا باسم:

التوقيت الديناميكي

يُرجى إعادة المحاولة.

تأخير

يُرجى إعادة المحاولة.

الإرخاء

🎉

ما هو الحد الأدنى لعدد اللقطات الرئيسية المطلوبة داخل صورة متحركة بدقة @keyframes؟

1

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

2

يُرجى إعادة المحاولة.

3

يُرجى إعادة المحاولة.

4

يُرجى إعادة المحاولة.