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

المادة بقلم: روتشستر أوليفيرا
  • تصميم الموقع
  • تحديث: Aug 28 و 2013

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

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

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

الاحماء

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

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

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

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

نقي المغلق التغريد فشل الحوت

الحوت فشل الحوت

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

نقي المغلق التمرير الكوك يمكن
CSS 3 أمثلة للرسوم المتحركة: Scrolling Coke Can

أدلى بها رومان كورتيس ، نرى هذا في العمل.

خالص المغلق المشي رجل

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

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

الحصول على يديك القذرة

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

#test {background: red؛ } #test: hover {background: green؛ } #test: active {background: blue؛ } #test: target {background: black؛ }

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

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

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

<a href='#test'> activate </a> <a href='#'> إلغاء التنشيط </a>

انتقالات المغلق

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

.test {/ * الفترة الانتقالية - خاصية توقيت الدالة ، * / اللون: أزرق ؛ الانتقال: لون 2s ، سهولة الوصول إلى تنسيق 2s بحجم الخط ؛ } .test: hover {color: red؛ } .test: active {font-size: 200٪؛ }

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

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

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

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

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

div {width: 400px؛ -o-transition: width 2s؛ -moz-transition: width 2s؛ -webkit-transition: width 2s؛ الانتقال: العرض 2s ؛ }

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

body {font-size: 1em؛ }media screen و (max-width: 800px) {body {font-size: 0.8em؛ }}media screen و (max-width: 400px) {body {حجم الخط: 0.7em؛ }}

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

body {-o-transition: font-size .5s linear؛ -moz-transition: font-size .5s linear؛ -webkit-transition: font-size .5s linear؛ الانتقال: حجم الخط .5s خطي ؛ }

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

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

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

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

/ * نفس الرمز لكل بائع * / @ -o-keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / * animation name * /keyframe my-animation {/ * محدد الإطار * / 0٪ {/ * frame style * / Left: 0px؛ Top: 0px؛ } 25٪ {Left: 200px؛ Top: 0px؛ } 50٪ {Left: 200px؛ Top: 200px؛ } 75٪ {Left: 0px؛ Top: 200px؛ } 100٪ {Left: 0px؛ Top: 0px؛ }}

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

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

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

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

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

#test: target {/ * animation-name | المدة توقيت وظيفة | التأخير | الاتجاه play-state * / animation: my-animation 10s linear 0s linin normal running؛ }

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

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

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

<div class = "accordion"> <a href="#tab1"> Tab 1 </a> <div id = "tab1"> <p> TEXT 1 </ p> </ div> <a href = "# tab2 "> علامة التبويب 2 </a> <div id =" tab2 "> <p> TEXT 2 </ p> </ div> <a href="#tab3"> علامة التبويب 3 </a> <div id =" tab3 "> <p> TEXT 3 </ p> </ div> </ div>

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

/ * يتم إخفاء أي div موجود داخل الأكورديون * / .accordion div {/ * بشكل افتراضي * / height: 0؛ إخفاء الفائض؛ / * the black magic * / transition: height 1s؛ } / * عندما يكون div المذكور هو target * / .accordion div: target {/ * height: auto will work، but this will work fine * / height: 80px؛ }

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

قائمة CSS فقط مع Submenus

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

<nav> <ul> <li> <a href='#item1'> العنصر 1 </a> <div> <ul> <li> <a href='#item11'> العنصر 1.1 </a> </ li> <li> <a href='#item12'> Item 1.2 </a> </ li> </ ul> </ div> </ li> <li> <a href='#item2'> Item 2 </a> <div> <ul> <li> <a href='#item21'> العنصر 2.1 </a> </ li> <li> <a href='#item22'> العنصر 2.2 </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

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

a {/ * فقط جعل الارتباطات أفضل قليلا * / display: block؛ الحشو: 4px؛ } nav {text-align: center؛ } / * أي قائمة (بما في ذلك القائمة الرئيسية) * / nav ul {display: inline-block؛ نمط القائمة: لا شيء ؛ } nav> ul> li {/ * عناصر أفقية (سيعمل رأسيا بشكل جيد أيضًا) * / float: left؛ } nav li div {/ * طي أي قائمة فرعية * / ارتفاع: 0؛ إخفاء الفائض؛ / * مشاعر هوديني * / الانتقال: الارتفاع 1s؛ } nav li: hover> div {height: 56px؛ }

وتلخيصا

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

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

حول روتشستر أوليفيرا

أنا مصمم على شبكة الإنترنت ورجل أعمال من Itajubá (MG) ، البرازيل. أحب الكتابة عن المواضيع الغامضة والقيام ببعض الأشياء الرائعة.