تقنيات الرسوم المتحركة CSS3 التي تحتاج إلى معرفتها

الترجمة: تقنية الرسوم المتحركة CSS3 التي تحتاج إلى معرفتها

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

يرجى احترام حقوق النشر والإشارة إلى رابط هذا الموقع عند إعادة الطباعة!

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

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

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

ولد للإنترنت

بدأت خصائص CSS 3 مثل border-radius و box-shadow و text-shadow تكتسب زخمًا في المتصفحات المتقدمة مثل webkit (Safari وChrome وما إلى ذلك) وGecko (Firefox). إنها (خصائص CSS هذه) تنشئ بالفعل صفحات أخف وتجارب أكثر ثراءً للمستخدمين، وتتحلل بشكل أنيق. ومع ذلك، فهذه ليست سوى عدد قليل من الأشياء العديدة التي يمكن أن يقدمها لنا CSS 3.

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

تحويل CSS

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

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

تحويل

تنفذ سمة التحويل بعض الوظائف نفسها التي يمكن تنفيذها باستخدام SVG. يمكن استخدامه على العناصر المضمنة وعناصر الكتلة. فهو يسمح لنا بتدوير العناصر وقياسها ونقلها - باستخدام سطر واحد فقط من كود CSS.

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

بعض ميزات التحويل الممتعة والمفيدة:

تناوب

يسمح لك التدوير بتدوير كائن عن طريق تمرير قيمة بالدرجات.

حجم

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

يترجم

ترجمة عناصر إعادة المواضع بناءً على إحداثيات X وY

انحراف

كما يوحي الاسم، الانحراف هو إمالة الكائن، والمعلمة هي الدرجة.

مصفوفة

يدعم التحويل تحويل المصفوفة، وهو تغيير موضع العناصر بناءً على إحداثيات X وY

دعونا نلقي نظرة أعمق على كل ميزة.

تناوب

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

يرجى ملاحظة أنه في IE8 (الوضع غير القياسي) يتطلب منك كتابة "-ms-filter" بدلاً من "filter".

دعم المتصفح

دعم المتصفح للترجمة واسع بشكل مدهش. في مقتطف CSS أعلاه، نقوم ببساطة بإضافة البادئات -webkit- و -moz- وتدوير عنصر #nav -90 درجة.

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

لحسن الحظ، لدى IE مرشح لهذا: مرشح تدوير الرسومات. يمكن أن تحتوي على 4 قيم دوران: 0، 1، 2، و3. لن تحصل على نفس التحكم التفصيلي مثل Webkit وGecko، لكنه سيكون على الأقل متسقًا إلى حد ما (حتى مع IE6). على الرغم من أن هذا الفلتر يدعم فقط 4 قيم، وهو ما يبدو عديم الفائدة بعض الشيء، إلا أنه بالنسبة لـ IE، فهو أفضل من لا شيء.

حجم

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

تقوم القيم الموجبة بتكبير العنصر، كما تتوقع، بناءً على العرض والارتفاع المحددين.

القيم السالبة لا تؤدي إلى تقليص العنصر، بل تقلبه (على سبيل المثال، يتم عكس النص) وقياسه وفقًا لذلك. ومع ذلك، يمكنك تقليص أو تقليص عنصر ما باستخدام رقم عشري أقل من 1 (على سبيل المثال .5).

دعم المتصفح

سمة المقياس مدعومة حاليًا فقط بواسطة Firefox وSafari وChrome، وحتى الآن لا يدعمها أي إصدار من IE. يعد قياس كائن ما خيارًا ذا معنى إلى حد ما في التصميم. ويمكن استخدامه من خلال التحسين التدريجي: التمرير، والذي يمكن أن يضيف القليل من الاهتمام إلى التنقل الخاص بك.