كيفية الاستخدام الجيد للرسوم المتحركة CSS3: البرنامج التعليمي ونماذج الرموز والأمثلة

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


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

احصل على مقعد ، أنت مفكرة ومتصفح حقيقي (أي شيء ما عدا IE) ودعنا نبدأ.

الاحماء

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

  • من المحتمل أن تكون أسرع ، حيث يمكنهم الاستفادة من تسريع الأجهزة (كتطبيقات HTML5)
  • سيكون أداؤها أفضل في أجهزة الجوال ولن تحتاج إلى رمز محدد لتتبع أحداث اللمس
  • يحتاج JS إلى أن يفسر من قبل المتصفح وأن احتمالات كسر المتصفح أكبر بكثير. لذلك عندما تفشل CSS ، فإنها تفشل بصمت بينما يمكن لـ JS كسر الصفحة بأكملها
  • لديهم دعم متصفح جيد جدًا (سيساعدك هذا الموقع في التحقق من إحصائيات محددة حول ذلك: http://caniuse.com/#search)

أمثلة للرسوم المتحركة CSS3

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

الحوت CSS Twitter Fail Whale

الحوت الفاشل المتحرك

 من صنع ستيفن دينيس ، شاهد هذا في العمل.

يمكن فحم الكوك التمرير النقي CSS
أمثلة للرسوم المتحركة في CSS 3: يمكن لفحم الكوك التمرير

من صنع رومان كورتيس ، شاهد هذا في العمل.

نقي CSS المشي الرجل

أمثلة CSS 3 للرسوم المتحركة: The Walking Man

 من صنع أندرو هوير ، شاهد هذا في العمل.

جعل يديك متسختين

لنبدأ الرمز. سنستخدم الكثير من فئات CSS الزائفة لتشغيل الرسوم المتحركة. لنكون صادقين ، يوصي الكثير من المطورين باستخدام JS لتنشيط الرسوم المتحركة وإلغاء تنشيطها ، ولكن هنا سنرى الطريقة الأسهل:

#اختبار {
الخلفية: أحمر ؛
}}
#test: تحوم {
الخلفية: أخضر ؛
}}
#test: نشط {
الخلفية: أزرق ؛
}}
#test: الهدف {
الخلفية: أسود ؛
}}

لدينا بعض الفئات الزائفة الأخرى لاستخدامها ، ولكن لديك الفكرة! لذا إليك ما يحدث إذا نقرت على عنصر #test (بافتراض أنه رابط):

  • الحالة الطبيعية: ستكون الخلفية حمراء
  • تحوم: عندما يدخل الماوس منطقة عنصر ، سيكون لها خلفية خضراء
  • نشط: عند النقر فوق المؤشر عليه ، وبينما يستمر الضغط على زر الماوس ، سيكون لون الخلفية أزرق
  • الهدف: عندما تحتوي الصفحة الحالية على #test في عنوان URL ، سيكون هذا العنصر باللون الأسود

يمكن استخدام كل واحد من هذه الرسوم المتحركة في CSS ، على سبيل المثال ، يمكنك إنشاء رابطين لتنشيط وإلغاء تنشيط الرسوم المتحركة CSS باستخدام عنصر الزائفة الهدف باستخدام هذا الرمز:

تفعيل
تعطيل

انتقالات CSS

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

.اختبار {
/ * دالة توقيت مدة خاصية النقل ، * /
لون أزرق؛
الانتقال: اللون 2s ، 2s حجم الخط التخفيف ؛
}}
.اختبار: تحوم {
لون احمر؛
}}
.اختبار: نشط {
حجم الخط: 200٪ ؛
}}

عند تحريك عنصر الاختبار. سيغير اللون تدريجيًا من الأزرق إلى الأحمر (أي لوحة لطيفة ، هاه؟). عند النقر فوق العنصر ، سيزداد حجم الخط تدريجيًا إلى 200٪ من حجم الخط الافتراضي.

لدينا أيضًا خاصية “توقيت الانتقال” ، تم تعيينها على أنها سهلة ، بحيث يتم قضاء “الوقت” المتاح للرسوم المتحركة. فيما يلي القيم المحتملة:

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

ستقوم وظيفة Bezier المكعبة بإنشاء رسم متحرك مخصص بأربعة أرقام تختلف من 0 إلى 1 ، مما يمثل المنحنى الرياضي لسرعة الرسوم المتحركة X المدة.

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

div {
العرض: 400 بكسل ؛
-س الانتقال: عرض 2s ؛
-موز – انتقال: عرض 2 ثانية ؛
-انتقال webkit: العرض 2s ؛
الانتقال: العرض 2 ثانية ؛
}}

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

الجسم {
حجم الخط: 1em ؛
}}
شاشةmedia و (الحد الأقصى للعرض: 800 بكسل) {
الجسم {
حجم الخط: 0.8em ؛
}}
}}
شاشةmedia و (الحد الأقصى للعرض: 400 بكسل) {
الجسم {
حجم الخط: 0.7em ؛
}}
}}

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

الجسم {
-س الانتقال: حجم الخط .5 s الخطي ؛
-موز – انتقال: حجم الخط .5 s خطي ؛
-webkit-transfer: حجم الخط .5 s الخطي ؛
الانتقال: الخط حجم الخط .5 s ؛
}}

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

الرسوم المتحركة CSS – يبدأ المرح الحقيقي

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

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

/ * نفس الرمز لكل بائع * /
@ -o-keyframe my-animation { …
@ -moz-keyframe my-animation { …
@ -webkit-keyframe my-animation { …
/ * اسم الرسوم المتحركة * /
keyframe my-animation {
/ * محدد الإطار * /
0٪ {
/ * نمط الإطار * /
اليسار: 0 بكسل ؛
أعلى: 0 بكسل ؛
}}
25٪ {
اليسار: 200 بكسل ؛
أعلى: 0 بكسل ؛
}}
50٪ {
اليسار: 200 بكسل ؛
أعلى: 200 بكسل ؛
}}
75٪ {
اليسار: 0 بكسل ؛
أعلى: 200 بكسل ؛
}}
100٪ {
اليسار: 0 بكسل ؛
أعلى: 0 بكسل ؛
}}
}}

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

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

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

  • الاسم: هذا المعرف الفريد
  • المدة: كم من الوقت سيستغرق من 0٪ إلى 100٪
  • وظيفة التوقيت: تشبه إلى حد كبير وظيفة توقيت الانتقال
  • التأخير: كم من الوقت سيستغرق لبدء 0٪
  • عدد التكرار: عدد التكرار الذي سنحصل عليه (“لانهائي” للحلقة اللانهائية)
  • الاتجاه: عادي أو بديل (عكسي)
  • حالة التشغيل: إذا كانت الصورة المتحركة قيد التشغيل أو متوقفة مؤقتًا

سيؤدي هذا إلى تطبيق الرسوم المتحركة على عنصر #test عندما يكون هدف الصفحة:

#test: الهدف {
/ * animation-name | المدة | وظيفة توقيت | تأخير | عد التكرار | الاتجاه | دولة اللعب * /
الرسوم المتحركة: حركتي 10s الخطية 0s تشغيل عادي لانهائي ؛
}}

مع وضع ذلك في الاعتبار ، يمكننا إنشاء بعض الأمثلة الرائعة.

CSS الأكورديون فقط

سنقوم بإنشاء لوحات قابلة للطي باستخدام الرسوم المتحركة CSS. فيما يلي هيكل HTML الأساسي:

علامة التبويب 1

النص 1

علامة التبويب 2

النص 2

علامة التبويب 3

النص 3

سيؤدي هذا فقط إلى إنشاء الألواح والرابط الذي سيشغل كل واحد منهما. وهنا يحدث السحر:

/ * أي div داخل الأكورديون * /
.الاكورديون div {
/ * مخفي بشكل افتراضي * /
الارتفاع: 0 ؛
إخفاء الفائض؛
/ * السحر الأسود * /
الانتقال: الارتفاع 1s ؛
}}
/ * عندما يكون div المذكور هو الهدف * /
.الاكورديون div: الهدف {
/ * الارتفاع: لن تعمل السيارات تلقائيًا ، لكن هذا سيعمل بشكل جيد * /
الارتفاع: 80 بكسل ؛
}}

بسيطة جدا ، هاه؟ وهل قضيت حياتك كلها باستخدام JS لهذا؟ :)

قائمة CSS فقط مع قوائم فرعية

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

  • البند 1
    • البند 1.1
    • البند 1.2
  • البند 2
    • البند 2.1
    • البند 2.2

ويبدأ السحر هنا:

أ {
/ * فقط جعل الروابط أفضل قليلاً * /
العرض محجوب؛
الحشو: 4 بكسل ؛
}}
التنقل {
محاذاة النص: مركز ؛
}}
/ * أي قائمة (بما في ذلك القائمة الرئيسية) * /
التنقل ul {
عرض: كتلة مضمنة ؛
نمط القائمة: لا شيء ؛
}}
التنقل>ul>لي {
/ * العناصر الأفقية (سيعمل العمودي جيدًا أيضًا) * /
تعويم: اليسار؛
}}
nav li div {
/ * طي أي قائمة فرعية * /
الارتفاع: 0 ؛
إخفاء الفائض؛
/ * مشاعر هوديني * /
الانتقال: الارتفاع 1s ؛
}}
التنقل لي: تحوم>div {
الارتفاع: 56 بكسل ؛
}}

تلخيص لما سبق

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

لذا ، هل استخدمت هذا من قبل؟ هل يمكنك التفكير في تطبيق جيد آخر للرسوم المتحركة CSS؟ شارك أفكارك باستخدام التعليقات!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map