دروس رسوم متحركة CSS: دليل كامل للمبتدئين

هذا هو دليل بناء الجملة الكامل وبرنامج تعليمي تفاعلي للرسوم المتحركة CSS للمبتدئين. استخدمه كمرجع لمعرفة الأجزاء المختلفة لمواصفات الرسوم المتحركة لـ CSS.

قطع أداء المتصفح شوطًا طويلاً في السنوات العشر الماضية. كان من الصعب جدًا إضافة رسوم متحركة تفاعلية إلى صفحات الويب نظرًا لاحتمال حدوث مشكلات في العرض والأداء. ولكن في الوقت الحاضر ، يمكن استخدام الرسوم المتحركة لـ CSS بحرية أكبر ، كما أن تعلم بناء الجملة بشكل عام أسهل بكثير مقارنة بميزات CSS مثل الشبكة أو flexbox.

هناك ميزات مختلفة تعد جزءًا من مواصفات الرسوم المتحركة W3C CSS. بعضها أسهل في الاستخدام من البعض الآخر. هذا البرنامج التعليمي للرسوم المتحركة للإطار الرئيسي لـ CSS سوف يمر عبر كل بناء الجملة ، بما في ذلك كل خاصية من الخصائص المختلفة. سأقوم بتضمين عروض توضيحية تفاعلية لمساعدتك على فهم ما هو ممكن باستخدام رسوم CSS المتحركة.

بناء جملة keyframes

تحتوي كل رسوم متحركة CSS على جزأين: واحد أو أكثر من خصائص animation-* جنبًا إلى جنب مع مجموعة من الإطارات الرئيسية للرسوم المتحركة التي تم تحديدها باستخدام @keyframes at-rule. دعنا نلقي نظرة تفصيلية على ما يدخل في إنشاء مجموعة قواعد @keyframes .

يبدو بناء الجملة كما يلي:

 @keyframes moveObject 0% transform: translateX(0); 50% transform: translateX(300px); 100% transform: translateX(300px) scale(1.5);

كما هو موضح هنا ، @keyframes at-rule ثلاثة أجزاء أساسية:

• قاعدة @keyframes متبوعة باسم حركة مخصص
• مجموعة من الأقواس المتعرجة تغلف جميع الإطارات الرئيسية
• واحد أو أكثر من الإطارات الرئيسية ، لكل منها نسبة مئوية متبوعة بمجموعة قاعدة محاطة بأقواس معقوفة

في هذا المثال الأول من البرنامج التعليمي للرسوم المتحركة لـ CSS ، قمت بتعريف الرسوم المتحركة الخاصة بي بالاسم moveObject . يمكن أن يكون هذا أي اسم أريده ، ويكون حساسًا لحالة الأحرف ، ويجب أن يلتزم بقواعد المعرفات المخصصة في CSS. يجب أن يتطابق هذا الاسم المخصص مع الاسم المستخدم في خاصية animation-name (تمت مناقشتها لاحقًا).

في المثال الخاص بي ، ستلاحظ أنني استخدمت النسب المئوية لتحديد كل من الإطارات الرئيسية في الرسوم المتحركة الخاصة بي. إذا تضمنت الرسوم المتحركة الخاصة بي إطارات رئيسية تساوي 0% و 100% ، فيمكنني بدلاً من ذلك استخدام الكلمات الرئيسية from to :

 @keyframes moveObject from transform: translateX(0); 50% transform: translateX(300px); to transform: translateX(300px) scale(1.5);

يستخدم CodePen التفاعلي التالي بناء الجملة أعلاه في مثال حي:

في العرض التوضيحي ، قمت بتضمين زر يعيد تعيين الرسوم المتحركة. سأشرح لاحقًا سبب الحاجة إلى ذلك. ولكن في الوقت الحالي ، فقط اعلم أن هذه الرسوم المتحركة تتضمن ثلاثة إطارات رئيسية تمثل خطوات في تسلسل الرسوم المتحركة هذا: البداية ، وخطوة 50٪ ، والنهاية (على سبيل المثال ، 0٪ ، و 50٪ ، و 100٪). يستخدم كل من هؤلاء ما يسمى محدد الإطارات الرئيسية جنبًا إلى جنب مع الأقواس المتعرجة لتحديد الخصائص في تلك الخطوة.

بعض الأشياء التي يجب ملاحظتها حول بنية @keyframes :

• يمكنك وضع مجموعات قواعد الإطارات الرئيسية بأي ترتيب تريده ، وسيستمر المتصفح في تشغيلها بالترتيب الذي تحدده نسبتها المئوية
• يمكنك حذف الإطارات الرئيسية 0٪ و 100٪ وسيحدد المتصفح ذلك تلقائيًا من خلال الأنماط الموجودة على العنصر الذي يتم تحريكه
• في حالة وجود إطارات رئيسية مكررة بمجموعات قواعد مختلفة (على سبيل المثال ، إطاران رئيسيان بنسبة 20٪ بقيمة تحويل مختلفة) ، يستخدم المتصفح آخر إطار
• يمكنك تحديد إطارات رئيسية متعددة في محدد إطار رئيسي واحد بفاصلة: 10%, 30% ...
• تبطل الكلمة الأساسية !important أي قيمة خاصية لذلك لا يجب استخدامها في خاصية داخل مجموعة قواعد الإطار الرئيسي

الآن بعد أن أصبح لديك فهم جيد لبناء جملة @keyframes في هذا البرنامج التعليمي للرسوم المتحركة CSS ، دعنا نلقي نظرة على خصائص الرسوم المتحركة المختلفة التي تم تحديدها في العنصر الذي يتم تحريكه.

خصائص الرسوم المتحركة التي سنغطيها:

خاصية اسم الحركة

كما ذكرنا ، يجب أن يكون لكل حركة CSS تقوم بإنشائها اسم يظهر في بنية @keyframes . يجب أن يكون هذا الاسم هو نفس الاسم المحدد باستخدام خاصية animation-name .

باستخدام CSS من العرض التوضيحي السابق ، تبدو البنية كما يلي:

 .box animation-name: moveObject;

مرة أخرى ، يجب أن يكون الاسم المخصص الذي حددته موجودًا أيضًا كاسم @keyframes at-rule - وإلا فإن هذا الاسم لن يفعل شيئًا. يمكنك التفكير في هذا مثل استدعاء دالة في JavaScript. ستكون الوظيفة نفسها هي جزء @keyframes moveObject من الكود ، بينما استدعاء الوظيفة هو animation-name: moveObject .

بعض الأشياء التي يجب وضعها في الاعتبار حول animation-name :

• القيمة الأولية animation-name هي none ، مما يعني أنه لا توجد إطارات رئيسية نشطة. يمكن استخدام هذا كنوع من "التبديل" لإلغاء تنشيط الرسوم المتحركة.
• الاسم الذي اخترته حساس لحالة الأحرف ويمكن أن يتضمن أحرفًا وأرقامًا وشرطات سفلية وواصلات.
• يجب أن يكون الحرف الأول في الاسم حرفًا أو واصلة ، لكن واصلة واحدة فقط.
• لا يمكن أن يكون الاسم كلمة محجوزة مثل unset أو initial أو inherit .

خاصية مدة الرسوم المتحركة

تحدد خاصية animation-duration ، وليس مفاجأة ، مقدار الوقت الذي تستغرقه الرسوم المتحركة للتشغيل مرة واحدة من البداية إلى النهاية. يمكن تحديد هذه القيمة بالثواني أو بالملي ثانية ، كما هو موضح أدناه:

 .box animation-duration: 2s;

ما سبق يعادل ما يلي:

 .box animation-duration: 2000ms;

يمكنك مشاهدة خاصية animation-duration قيد التنفيذ في العرض التوضيحي التالي CodePen. في هذا العرض التوضيحي ، يمكنك اختيار المدة التي تريد أن تستمر فيها الرسوم المتحركة. حاول إدخال قيم مختلفة إما بالثواني أو بالملي ثانية ، ثم استخدم زر "تحريك الصندوق" لتشغيل الرسم المتحرك.

إذا كنت تستخدم رقمًا صغيرًا مع ms للوحدة ، فقد لا تلاحظ أي حركة. حاول تعيين رقم أعلى إذا كنت تستخدم المللي ثانية.

بعض الملاحظات حول استخدام animation-duration :

• القيم السلبية غير صالحة
• يجب تضمين الوحدة ، حتى إذا تم ضبط المدة على 0s (القيمة الأولية)
• يمكنك استخدام القيم الكسرية (على سبيل المثال ، 0.8s )

خاصية Animation-time-function

تُستخدم animation-timing-function ، والتي ليست واضحة في معناها مثل الخاصيتين السابقتين ، لتحديد الطريقة التي تتقدم بها الرسوم المتحركة لـ CSS. قد لا يكون هذا هو أوضح تفسير ، لكن بناء الجملة قد يساعد في التوضيح.

الإعلان يبدو كالتالي:

 .box animation-timing-function: linear;

تقبل هذه الخاصية قيم الكلمات الرئيسية التالية:

• ease (القيمة الأولية)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

يسهل فهم معظم القيم نسبيًا من خلال أسمائها ، ولكن يمكنك أن ترى كيف تختلف باستخدام العرض التوضيحي التفاعلي التالي:

استخدم إدخال التحديد لاختيار إحدى قيم الكلمات الرئيسية السبع. لاحظ أن قيم ease-* "تسهل" الرسوم المتحركة بطرق مختلفة. القيمة الخطية متسقة طوال الطريق.

تقبل خاصية animation-timing-function أيضًا الوظائف التالية:

• cubic-bezier() - يقبل أربع قيم عدد مفصولة بفاصلات كوسيطات
• steps() - يقبل كوسيطتين قيمتين ، رقم و "مصطلح انتقال" مفصول بفاصلة

قيم الكلمات الأساسية step-start و step-end ، مكافئة لخطوات القيم steps(1, jump-start) steps(1, jump-end) ، على التوالي.

بالنسبة إلى cubic-bezier() ، قد يساعدك العرض التوضيحي التفاعلي التالي على فهم الوظيفة بشكل أفضل قليلاً:

لاحظ أن العرض التوضيحي يتيح لك تعيين الوسيطات الأربع في دالة cubic-bezier() . يمكن أن تكون اثنتان من الوسيطتين سالبتين ، واثنتان مقيدتان بالقيم العشرية بين 0 و 1. للحصول على شرح لائق لكيفية عمل هذه الأنواع من وظائف التوقيت ، يمكنك مراجعة هذه المقالة أو هذه الأداة التفاعلية.

من ناحية أخرى ، تقبل الدالة steps() وسيطين:

• عدد صحيح يمثل "نقاط توقف" متساوية على طول دورة واحدة من الرسوم المتحركة.
• كلمة أساسية اختيارية تسمى "Jumpterm" تحدد ما إذا كانت الرسوم المتحركة "معلقة" على فترات زمنية محددة

مرة أخرى ، يجب أن يساعدك العرض التوضيحي التفاعلي على فهم كيفية عمل وصلات القفز هذه:

حاول تحديد عدد صحيح مع رمز القفز (أو جربه بدون رمز القفز) لترى كيف تختلف الكلمات الرئيسية المختلفة مع قيم الأعداد الصحيحة المختلفة. من الواضح أن الأعداد الصحيحة السالبة مسموح بها ولكني لا أرى أي فرق بين 0 وأي قيمة سالبة.

خاصية Animation-iteration-count

في بعض الحالات ، ستكون سعيدًا إذا تم تشغيل الرسوم المتحركة مرة واحدة ، ولكن في بعض الأحيان تريد تشغيل الرسوم المتحركة عدة مرات. تتيح لك خاصية animation-iteration-count القيام بذلك عن طريق قبول رقم موجب يمثل عدد المرات التي تريد تشغيل الرسوم المتحركة فيها:

 .box animation-iteration-count: 3;

القيمة الأولية لـ animation-iteration-count هي 1 ولكن يمكنك أيضًا استخدام الكلمة الأساسية infinite (تشرح نفسها بنفسها) أو استخدام قيمة كسرية. ستعمل القيمة الكسرية على تشغيل الرسم المتحرك جزئيًا خلال التشغيل الجزئي:

 .box animation-iteration-count: 3.5;

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

تكون هذه الخاصية مفيدة للغاية عند استخدامها بالاقتران مع خاصية animation-direction (تمت مناقشتها لاحقًا) ، لأن الرسوم المتحركة التي يتم تشغيلها من البداية فقط لا تكون مفيدة للغاية إذا تم تشغيلها أكثر من مرة.

يمكنك تجربة العرض التوضيحي أدناه والذي يسمح لك بتحديد قيمة كسرية لحساب التكرار ، حتى تتمكن من رؤية التأثير:

خاصية اتجاهات الحركة

كما هو مذكور أعلاه في هذا البرنامج التعليمي للرسوم المتحركة لـ CSS ، تعمل خاصية animation-direction بشكل جيد جنبًا إلى جنب مع animation-iteration-count . تتيح لك خاصية animation-direction تحديد الاتجاه الذي تريد تشغيل الرسم المتحرك فيه. يبدو بناء الجملة كما يلي:

 .box animation-direction: alternate;

يمكنك تعيين القيمة كواحدة من أربع كلمات رئيسية:

• normal - يتم تشغيل الرسوم المتحركة للأمام في التكرار الأول (الافتراضي)
• reverse - يتم تشغيل الرسوم المتحركة بشكل عكسي في التكرار الأول
• alternate - يتم تشغيل الرسم المتحرك للأمام في التكرار الأول ثم يتناوب في التكرارات اللاحقة
• alternate-reverse - مثل alternate ولكن يتم تشغيله بشكل عكسي في التكرار الأول

يمكنك تجربة القيم المختلفة بأعداد تكرار مختلفة باستخدام العرض التوضيحي التفاعلي أدناه:

خاصية Animation-play-state

لا تعد خاصية animation-play-state مفيدة للغاية في بيئة CSS الثابتة ولكنها قد تكون مفيدة عند كتابة رسوم متحركة تفاعلية عبر JavaScript أو حتى CSS.

تقبل هذه الخاصية قيمتين: running أو paused :

 .box animation-direction: paused;

افتراضيًا ، تكون أي حركة معينة في حالة "التشغيل". ولكن يمكنك استخدام JavaScript لتبديل قيمة الخاصية. يمكنك بشكل عملي استخدام ميزة CSS تفاعلية مثل :hover أو :focus لتغيير الرسم المتحرك إلى حالة "الإيقاف المؤقت" ، والتي تعمل أساسًا على تجميد الرسوم المتحركة أينما كانت في التكرار الحالي.

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

خاصية Animation-delay

تم تصميم بعض الرسوم المتحركة لبدء الرسوم المتحركة على الفور ، بينما قد يستفيد البعض الآخر من تأخير بسيط قبل التكرار الأول. تتيح لك خاصية animation-delay تحقيق ذلك.

 .box animation-delay: 4s;

مثل القيم الأخرى المستندة إلى الوقت ، يمكنك تعيين animation-delay إلى قيمة باستخدام الثواني أو المللي ثانية. يمكنك أيضًا استخدام القيم الكسرية.

من المهم ملاحظة أن التأخير يحدث فقط في التكرار الأول ، وليس كل تكرار. يمكنك تجربة ذلك باستخدام العرض التوضيحي التفاعلي أدناه:

يمنحك العرض التوضيحي خيار تغيير قيمة التكرار بالإضافة إلى التأخير ، بحيث يمكنك أن ترى أن التأخير لا يؤثر على أي تكرارات لاحقة - فقط الأولى.

طريقة مثيرة لاستخدام هذه الخاصية ذات قيمة سالبة. على سبيل المثال ، باستخدام العرض التوضيحي أعلاه ، حاول تعيين animation-delay على -0.5s . ستلاحظ أن التأخير السلبي يعمل تقريبًا مثل التقدم للأمام في آلة الزمن - تبدأ الرسوم المتحركة جزئيًا وليس في البداية.

خاصية وضع تعبئة الرسوم المتحركة

الخاصية الطويلة النهائية التي سأغطيها في هذا البرنامج التعليمي للرسوم المتحركة لـ CSS هي تلك التي استخدمتها في العرض التوضيحي السابق. ستلاحظ أنه عندما تتوقف الرسوم المتحركة عن التكرار النهائي ، يظل المربع في مكانه. يتم تحقيق ذلك باستخدام animation-fill-mode .

 .box animation-fill-mode: forwards;

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

تقبل هذه الخاصية قيم الكلمات الرئيسية الأربع التالية:

• none - الافتراضي ، لا توجد أنماط مطبقة قبل التنفيذ أو بعده
• forwards - يحتفظ بجميع الأنماط المطبقة في الإطار الرئيسي الأخير للرسوم المتحركة
• backwards - عكس القيمة السابقة بشكل أو بآخر ، فإنه يحتفظ بالأنماط المطبقة على الرسوم المتحركة بمجرد أن يبدأ التنفيذ ولكن قبل أن تبدأ الرسوم المتحركة
• both - يحتفظ بالأنماط forwards backwards

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

للراحة ، لقد أضفت جميع العروض التوضيحية في مجموعة CodePen واحدة.

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

خاصية اختزال الرسوم المتحركة

لقد غطيت ثماني خصائص مختلفة في هذا البرنامج التعليمي للرسوم المتحركة CSS للمبتدئين وأشجعك على استخدام اليد الطويلة. سيسهل ذلك عليك رؤية مجموعة القيم الصريحة.

بمجرد أن تفهم جيدًا كل خاصية من الخصائص ، يكون لديك خيار استخدام خاصية اختزال animation ، والتي تتيح لك تحديد جميع الخصائص الطويلة في إعلان واحد.

 .box animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;

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

إذا كنت تستخدم الاختصار ، فيمكنك وضع القيم بأي ترتيب تريده ، ولكن لاحظ القواعد التالية:

• القيمة الأولى التي تحدد الوقت هي animation-duration ؛ أي قيمة زمنية لاحقة هي animation-delay .
• إذا كان هناك تعارض بين الكلمة الأساسية واسم animation-name ، فستكون الأولوية لقيمة الكلمة الأساسية إذا ظهرت أولاً.
• ستعود أي قيم تم حذفها إلى حالتها الأولية ، كما هو الحال مع أي خاصية اختصار لـ CSS.

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

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

إليك مثال باستخدام الاختصار:

 .box animation: moveObject 2s ease-in-out, fadeBox 3s linear;

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

 .box animation-name: moveObject, fadeBox; animation-duation: 2s, 3s; animation-timing-function: ease-in-out, linear;

لاحظ كيف تتضمن كل خاصية قيمتين مفصولتين بفاصلات. في هذه الحالة ، من شبه المؤكد أن يكون الاختصار أسهل في القراءة والمحافظة عليه.

اختتام هذا البرنامج التعليمي للرسوم المتحركة CSS

تحذير أخير: استخدم الرسوم المتحركة باعتدال وتذكر أن بعض مستخدمي الويب قد يتأثرون سلبًا بالألوان الوامضة والأشياء الأخرى سريعة الحركة.