ما هي خاصية اتجاه الرسوم المتحركة في CSS: كل ما تريد معرفته

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

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

هل أنت جديد على هذا؟ لا داعي للقلق! في هذه المدونة ، ستتعرف على كل شيء عن خصائص الرسوم المتحركة لـ CSS.

الآن ، دون أي مزيد من اللغط ، دعنا نفهم ماهية الرسوم المتحركة لـ CSS ، إلى جانب استخدامها.

ما هي خاصية CSS Animation-direction؟

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

الآن ، دعنا نلقي نظرة على اتجاهات الرسوم المتحركة المختلفة:

• اتجاه الرسوم المتحركة: عادي ؛
• اتجاه الرسوم المتحركة: عكس ؛
• اتجاه الرسوم المتحركة: عكس بديل ؛
• اتجاه الرسوم المتحركة: بديل ؛

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

/ * الرسوم المتحركة الفردية لخاصية الرسوم المتحركة CSS * /

• اتجاه الرسوم المتحركة: عادي ؛
• اتجاه الرسوم المتحركة: عكس ؛
• اتجاه الرسوم المتحركة: بديل ؛
• اتجاه الرسوم المتحركة: عكس بديل ؛

/ * الحركات المتعددة لخاصية الرسوم المتحركة CSS * /

• اتجاه الرسوم المتحركة: عادي ، عكسي ؛
• اتجاه الرسوم المتحركة: بديل ، عكسي ، عادي ؛

/ * القيم العامة لخاصية الرسوم المتحركة CSS * /

• اتجاه الرسوم المتحركة: يرث ؛
• اتجاه الرسوم المتحركة: أولي ؛
• اتجاه الرسوم المتحركة: العودة ؛
• اتجاه الرسوم المتحركة: unset؛

الآن بعد أن عرفت خصائص رسوم متحركة مختلفة لـ CSS ، حان الوقت لفهم قيم خصائص الرسوم المتحركة لـ CSS.

قيم خاصية CSS Animation

طبيعي

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

القيمة - "عادي" هي في الأساس القيمة الافتراضية لخاصية اتجاهات الحركة في CSS. لذلك إذا لم تقم بتعيين هذه الخاصية ، فسيتم تشغيلها بشكل افتراضي للأمام.

يعكس

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

على سبيل المثال ، تصبح وظيفة التوقيت السهل عملية سهلة.

البديل

يعكس الرسم المتحرك البديل الاتجاه في كل دورة ، مع التكرار الأول في الاتجاه الأمامي . العد هو تحديد ما إذا كانت الدورة فردية أو زوجية تبدأ من واحدة.

البديل العكسي

عكس الاتجاه المعاكس يعكس اتجاه كل دورة ، مع تشغيل التكرار الأول للخلف . العد هو تحديد ما إذا كانت الدورة زوجية أم فردية ، بدءًا من واحدة.

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

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

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

مشكلات الرسوم المتحركة الشائعة في CSS

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

لا توجد قاعدة keyframes

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

لم يتم تعيين مدة الرسوم المتحركة

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

لتجاوز هذه الدورة ، تحتاج إلى دمج قاعدة مدة الرسوم المتحركة في العنصر المستهدف بقيمة ثانية ، تمامًا كما هو الحال في نفس الكتلة مثل اسم الحركة.

تبدأ الرسوم المتحركة في وقت قريب جدًا

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

خصائص CSS غير المتحركة

سبب آخر لعدم عمل الرسوم المتحركة ربما هو أنك تحاول تحريك خاصية CSS غير متحركة.

الرسوم المتحركة CSS غير مدعومة

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

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

اختزال CSS مكتوب بشكل غير صحيح

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

• فترة الرسوم المتحركة
• الرسوم المتحركة دعوة
• تأجيل الرسوم المتحركة
• اتجاه الرسوم المتحركة
• وضع تعبئة الرسوم المتحركة
• الرسوم المتحركة-التكرار-الاعتماد
• الرسوم المتحركة تلعب الأمة
• الرسوم المتحركة توقيت وظيفة

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

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

أداء بطيء

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

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

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

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

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

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

القول الفصل

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

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

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

المحرر: ديفيا