توضح هذه المقالة عرضًا عمليًا لتشغيل / إضافة رسوم متحركة متعددة لـ CSS في نفس الوقت.
كيف تلعب العديد من الرسوم المتحركة CSS في نفس الوقت؟
من خلال تطبيق رسوم CSS متحركة متعددة في نفس الوقت ، يمكن للمطورين بسهولة إنشاء واجهات أكثر جاذبية. لتشغيل العديد من رسوم CSS المتحركة في نفس الوقت ، امنح كل واحدة اسمًا فريدًا وقم بتطبيق هذه الأسماء على نفس المكونات أو مكونات منفصلة على الصفحة.
اتبع الإجراء أدناه لتشغيل / إضافة أكثر من رسم متحرك في نفس الوقت.
الخطوة 1: إنشاء الهيكل
أولاً ، قم بإنشاء عنصر HTML يتم فيه تطبيق الرسوم المتحركة في الخطوات القادمة. على سبيل المثال ، سيتم إدراج الصورة:
< شعبة فصل = 'فترة' >
< IMG src = 'book.jpg' ارتفاع = '100 بكسل' عرض = '100 بكسل' فصل = 'تحريك' >
< / شعبة >
في مقتطف الشفرة أعلاه:
- أولاً ، يتم تعيين مسار الصورة على ' src ' يصف.
- بعد ذلك ، قيمة ' 100 بكسل 'إلى خاصيتي' العرض 'و' الارتفاع 'في CSS.
- أيضًا ، عيّن قيمة ' تحريك 'إلى' فصل ' يصف.
الخطوة 2: إعداد الرسوم المتحركة
ال ' الإطارات الرئيسية 'لإنشاء رسوم متحركة مخصصة وفقًا لحاجة صفحة الويب. على سبيل المثال ، تم إنشاء رسمين متحركين في مقتطف الشفرة أدناه:
@ -webkit-keyframes تدور {100 ٪ {
تحويل: تدوير ( 180 درجة ) ؛
}
}
@ -webkit-keyframes مقياس {
100 ٪ {
تحويل: scaleX ( 1 ) مقياس ص ( 1 ) ؛
}
}
في مقتطف الشفرة أعلاه:
- لأول مرة ' @ -webkit-keyframes 'يتم استخدام الآلية لإنشاء' يلف ' و ' استدارة 'الرسوم المتحركة المسماة.
- بعد ذلك ، استخدم ' تحول 'التي لها قيمة' استدارة() ' في ال ' يلف 'هيئة الرسوم المتحركة. تقوم هذه الوظيفة بتدوير العنصر بزاوية ' 180 درجة '.
- بعد ذلك ، عيّن الرسم المتحرك الذي ينمو أو يوسع العنصر الأصلي بعامل ' 1 'في كل من' X ' و ' و 'في' حجم 'هيئة الرسوم المتحركة.
الخطوة 3: تطبيق الرسوم المتحركة على عناصر HTML
داخل جزء CSS ، حدد الفئة ' تحريك 'الذي تم تعيينه إلى' '، وتقديم خصائص CSS التالية:
الموقف: مطلق.
غادر: 60 ٪؛
عرض : 110 بكسل ؛
ارتفاع : 110 بكسل ؛
الهامش: -40 بكسل 0 0 -40 بكسل ؛
-رسوم متحركة لمجموعة الويب: مقياس خطي لانهائي بمقياس 3 ثوانٍ ؛
-webkit-animation: تدور 2s خطي لانهائي ؛
}
وصف الخصائص المستخدمة في كتلة التعليمات البرمجية أعلاه:
- أولاً ، حدد قيمة ' مطلق 'إلى CSS' موضع ' ملكية. إنه يتماشى مع ' IMG 'حسب الرسم المتحرك.
- ثم قدم قيم ' 60٪ '،' 110 بكسل ' و ' 110 بكسل 'إلى CSS' غادر '،' عرض ' و ' ارتفاع ' ملكيات. يتم استخدام هذه الخصائص لتعيين موضع العنصر وحجمه.
- بعد ذلك ، قم بتعيين قيمة ' 3s مقياس خطي لانهائي 'إلى' -webkit- الرسوم المتحركة 'CSS.
- و ال ' 3 ثانية 'هي مدة تلك الرسوم المتحركة ،' لانهائي 'هي مدة الرسم المتحرك ، و' خطي 'هو اتجاه الرسم المتحرك.
- في النهاية ، قدِّم قيم ' تدور 2 ثانية خطي لانهائي 'إلى CSS' -webkit- الرسوم المتحركة ' ملكية. تضيف هذه الخاصية الرسوم المتحركة الثانية المسماة ' يلف ' على ال ' IMG ' عنصر.
بعد تجميع كتلة الشفرة أعلاه ، تبدو الرسوم المتحركة كما يلي:
توضح الصورة المتحركة أعلاه أن ' يلف يتم تشغيل الرسوم المتحركة 'على العنصر المستهدف.
الخطوة 4: تشغيل رسوم متحركة متعددة على عناصر HTML
كما في الخطوة أعلاه ، تم تطبيق رسم متحرك واحد فقط على العنصر. هذا بسبب تعيين قيم متعددة لنفس ' -webkit- الرسوم المتحركة ' ملكية.
لحل هذه المشكلة ، قم بلف العنصر الهدف بعنصر HTML آخر. مثل ' شعبة 'مستخدم بالفعل كغلاف في الخطوة الأولى ، حدد' فترة 'وتحديث الكود مثل:
.animate {الموقف: مطلق.
غادر: 60 ٪؛
عرض : 110 بكسل ؛
ارتفاع : 110 بكسل ؛
الهامش: -40 بكسل 0 0 -40 بكسل ؛
-رسوم متحركة لمجموعة الويب: مقياس خطي لانهائي بمقياس 3 ثوانٍ ؛
}
. فترة {
الموقف: نسبي ؛
أعلى: 160 بكسل ؛
-webkit-animation: تدور 2s خطي لانهائي ؛
}
في الكود أعلاه:
- في البداية ، ' تحريك 'تظل الفئة كما هي وتتم إزالة الرسم المتحرك الثاني فقط منه والذي يتم وضعه في' فترة ' فصل.
- بعد ذلك ، قم بتعيين الموقف من خلال استخدام ' موضع ' و ' قمة ' ملكيات.
بعد تنفيذ مقتطف الشفرة أعلاه ، تظهر صفحة الويب الآن على النحو التالي:
يوضح الإخراج أنه تم تطبيق كلتا الحركتين على عنصر HTML المحدد في نفس الوقت.
خاتمة
لتطبيق خصائص CSS متعددة ، قم بلف العنصر بعناصر HTML وقم بتطبيق رسوم متحركة عليها بحيث يحتوي كل عنصر HTML على رسم متحرك واحد. نظرًا لأن الخاصية الفرعية ترث الرسوم المتحركة المطبقة على عنصر HTML الأصلي ، يتم تطبيق العديد من الرسوم المتحركة دون التسبب في أخطاء أو غموض للمجمع. هذا هو الإجراء لتشغيل / إضافة أكثر من رسم متحرك CSS في نفس الوقت.