رسوم متحركة باستخدام CSS

الموسوعة الحرة

CSS animations هي وحدة نمطية لأوراق الأنماط المتتالية تسمح بتحريك عناصر مستند HTML باستخدام CSS.

تاريخ

:hoverعلى الرغم من استخدام الفئة الزائفة لإنشاء رسوم متحركة بدائية لسنوات، إلا أن امتدادات CSS إلى مجال الرسوم المتحركة كانت محدودة للغاية حتى أواخر العقد الأول من الألفية الثانية. ففي عام 2007، أعلنت WebKit عن نيتها تضمين الرسوم المتحركة والانتقالات والتحويلات في CSS كميزات أساسية. كما أعلنت في فبراير 2009 عن تطبيق الرسوم المتحركة الضمنية والصريحة عبر CSS. وقد طُرحت الرسوم المتحركة في CSS أيضًا كميزة في CSS3، وهي مسودة المواصفات قيد التطوير والتي يديرها اتحاد شبكة الويب العالمية (W3C).

حاضِر

تُعدّ خاصية CSS Animations وحدةً من وحدات CSS CSS Sheets، تُمكّن المستخدمين من تحريك مؤشر الماوس فوق العناصر لتشغيل الرسوم المتحركة. وهي مُعتمدة حاليًا من قِبل جميع محركات البحث الرئيسية. وعلى الرغم من الجدل الدائر حول استخدام الرسوم المتحركة عبر جافا سكريبت، إلا أن وسم hover يُستخدم الآن على نطاق واسع في مجتمع CSS CSS Sheets.

رسومات متجهة قابلة للتوسيع

SVG متحرك باستخدام CSS 3

بالإضافة إلى خاصية التمرير ، تدعم الرسومات المتجهة القابلة للتوسيع@keyframes قاعدة @، مما يسمح بتحريك مجموعة محدودة من التحويلات. استخدم كل من فايرفوكس وكروم امتدادات @-moz-keyframes@ و @ @-webkit-keyframesعلى التوالي، قبل @keyframesإضافة @ إلى مواصفات CSS 3. [ 2 ]

دعم المتصفح

اعتبارًا من يونيو 2011، يدعم Firefox 5 تأثيرات CSS المتحركة. [ 4 ] كما تتوفر تأثيرات CSS المتحركة كوحدة نمطية في الإصدارات التجريبية الليلية من WebKit، بالإضافة إلى Google Chrome و Safari 4 و5 وSafari لنظام iOS (iPhone وiPod Touch وiPad)، وإصدارات Android 2.x و3.x، و Internet Explorer 10 والإصدارات الأحدث، ومتصفح Microsoft Edge ، ومتصفح الويب الخاص بنظام BlackBerry OS 6، مع -webkit-البادئة. [ 5 ] [ 6 ] [ 7 ] كما تُستخدم أيضًا في iTunes 9 لدعم ملفات iTunes LP .

الجدل

في المراحل الأولى لتطوير رسوم CSS المتحركة، أثارت هذه التقنية مخاوف من يفضلون استخدام جافا سكريبت [ 8 ] أو لغة تكامل الوسائط المتعددة المتزامنة (SMIL) على نطاق أقل استخدامًا ؛ بينما ادعى آخرون أنها خطوة من شركة آبل ، الراعي الرئيسي لمشروع WebKit، لتجنب تضمين أدوبي فلاش ( ورسوم فلاش المتحركة الحالية ) في أجهزة iOS المحمولة التي تعمل بمتصفح سفاري . [ 9 ] [ 10 ] [ 11 ] علاوة على ذلك، ورغم سهولة استخدام لغة CSS، لا يزال العديد من المبرمجين يواجهون صعوبة في إنشاء الرسوم المتحركة. ولحل هذه المشكلة، قام العديد من الأفراد والمواقع الإلكترونية بتطوير وإنشاء رسوم متحركة مفتوحة المصدر لأزرار CSS مع شفرة برمجية [ 12 ] ليتمكن المستخدمون من نسخها. ومع ذلك، ورغم هذه الخلافات السابقة، لا تزال رسوم CSS المتحركة منتشرة على نطاق واسع عبر الإنترنت.

انظر أيضاً

مراجع

  1. ↑ "تاريخ نشر CSS Animations المستوى 1 - W3C" . W3C . nd . تم الاطلاع عليه بتاريخ 2021-04-09 .
  2. جاكسون، دين؛ بارون، ل . ديفيد؛ أتكينز الابن، تاب؛ بيرتلز، برايان؛ هايات، ديفيد؛ مارين، كريس؛ غالينو، سيلفان، محررون. (2023-03-02). " رسوم متحركة CSS المستوى 1" . اتحاد شبكة الويب العالمية ( W3C ). مجموعة عمل CSS . تم الاسترجاع في 2023-03-26 .
  3. ↑ بارون، ل. ديفيد؛ بيرتلز، برايان، محرران. (2023-03-02). "رسوم متحركة CSS المستوى 2" . مسودات محرر مجموعة عمل CSS . تم الاسترجاع في 2023-03-26 .
  4. ↑ ملاحظات إصدار موزيلا فايرفوكس ، مؤسسة موزيلا، 21 يونيو 2011، مؤرشفة من الأصل في 11 أغسطس 2011 ، تم الاطلاع عليها في 9 أبريل 2021{{citation}}: CS1 maint: bot: حالة عنوان URL الأصلي غير معروفة ( رابط )
  5. ↑ هايات، ديف (31-10-2007)، "رسوم متحركة CSS | WebKit" ، WebKit ، Surfin' Safari ، تم الاطلاع عليه بتاريخ 9-4-2021
  6. ↑ جاكسون، دين (5 فبراير 2009)، "رسوم متحركة CSS | WebKit" ، WebKit ، Surfin' Safari ، تم الاطلاع عليه بتاريخ 9 أبريل 2021
  7. ↑ "قاعدة @keyframes (إنترنت إكسبلورر)" ، وثائق مايكروسوفت ، مايكروسوفت، 25 نوفمبر 2018، مؤرشفة من الأصل في 26 نوفمبر 2018 ، تم استرجاعها في 9 أبريل 2021
  8. ↑ سنوك، جوناثان (31 أكتوبر 2007)، رسوم متحركة CSS في متصفح سفاري ، Snook.ca، مؤرشف من الأصل بتاريخ 27 يناير 2021 ، تم الاطلاع عليه بتاريخ 9 أبريل 2021
  9. ↑ كيم، أرنولد (6 فبراير 2009)، رسوم متحركة CSS قادمة إلى سفاري، وهي موجودة بالفعل في آيفون. هل يعني ذلك تقليل الاعتماد على فلاش؟، MacRumors.com ، تاريخ الاطلاع: 9 أبريل 2021
  10. ↑ بالمر، روبرت (2009-02-06)، هل ستحل رسوم CSS المتحركة محل الحاجة إلى Flash في متصفح سفاري على الهاتف المحمول؟ ليس مرجحًا ، مدونة أبل غير الرسمية، مؤرشفة من الأصل في 2009-02-09 ، تم الاطلاع عليها في 2021-04-09
  11. ↑ فيراري، فينسنت (9 فبراير 2009)، رسوم متحركة CSS: بديل للفلاش؟، أفكار أبل ، تم الاطلاع عليه في 9 أبريل 2021
  12. ↑ ButtonAnimations (2019-12-11). "رسوم متحركة للأزرار CSS (مع الكود)" . ButtonAnimations . تم الاسترجاع في 2021-04-09 .
  • اقتراح أبل الأولي