وقفة وحلقة CSS الرسوم المتحركة مع الانتظار! حي
هناك الكثير الذي يمكنك القيام به باستخدام الرسوم المتحركة الخالصة لـ CSS ، ولكن الإيقاف المؤقت والتكرار للرسوم المتحركة غير ممكن مع المواصفات W3 الحالية.
ولكن مع أداة مجانية مثل انتظر! حي يمكنك فعلا إنشاء الرسوم المتحركة يحلق من الصفر مع التأخير مخصص بين كل حلقة. قد تبدو هذه مهمة دنيوية ولكنها تحل نقطة الألم للعديد من المطورين.
تجدر الإشارة إلى أن هناك خاصية CSS تسمى الرسوم المتحركة تأخير التي يؤخر بداية من الرسوم المتحركة CSS. ومع ذلك لا يؤثر على الرسوم المتحركة المتكررة لأنه يؤخر فقط نقطة البداية.
انتظر! حي لصناعة السيارات في باحتساب كم عدد الإيقاف المؤقت الذي يجب وضعه داخل إطارات الرسوم المتحركة المخصصة لـ إنشاء مدة التوقف بالضبط تحتاج بين الحلقات. يمكن أن يتم ذلك يدويًا لكنه ملفوف للغاية ، ناهيك عن مزعج للغاية.
هذا التطبيق على شبكة الإنترنت يمكن العمل مع أي ميزة الرسوم المتحركة CSS3, بما في ذلك التناوب والتحويلات. أنت لا تكتب أي خصائص CSS جديدة بل بالأحرى بناء على أعلى ميزة keyframes لنصنع او لنبتكر توقف مؤقت على أساس النسب المئوية (من 0 ٪ إلى 100 ٪) داخل الرسوم المتحركة.
تحقق من الصفحة الرئيسية لمعرفة بعض الأمثلة في العمل. من الواضح تمامًا ما يمكنك فعله والرمز المصدر موجود حقًا للنسخ / اللصق في عملك.
يرجى ملاحظة هذا هو ليست مكتبة كاملة. إنه مولد ذلك يخلق رمز CSS الخاص بك على ذبابة بناء على ما تحتاجه لتأخير الرسوم المتحركة.
إذا كنت تريد حلاً أبسط خارج الموقع ، يمكنك ذلك تحميل ساس mixin. هذا هو اصعب قليلا ل يتطلب خريطة ساس, لذلك ستحتاج إلى فهم كيفية إضافة خصائص مخصصة وكتابة بناء الجملة بشكل صحيح.
إليك مثال على كيفية ذلك استدعاء mixin:
@ include waitAnimate ((animationName: animName ، إطارات مفتاحية: (0: (convert: scale (1) ، لون الخلفية: blue) ، 50: (convert: scale (2) ، لون الخلفية: أخضر) ، 100: (convert : scale (3) ، لون الخلفية: red)) ، المدة: 2 ، waitTime: 1 ، توقيتوظيفة: easy ، itكرارCount: لانهائي)) ؛
لا ينبغي أن يواجه مطورو الويب المحترفين أي مشكلة في تعلم الحبال وبناء هذا في مزيج قابل لإعادة الاستخدام. لكن المطورين المبتدئين قد يكافحون من أجل تشغيله ، ومن ثم تطبيق الويب.
كل هذا مصدر الرمز متاح مجانا على جيثب إذا كنت تريد تنزيل نسخة محليًا. ولكن نظرًا لأن هذه ميزة غريبة ، فليس من المحتمل أن تحتاجها في العديد من المشاريع. لهذا السبب الانتظار! يجب أن يكون تطبيق الويب المتحرك أكثر من كاف لمساعدتك حل مشكلة لمرة واحدة من تأخير الرسوم المتحركة يحلق مع CSS النقي.
انها اختراق حقا متعة غامضة جدا من حيث التصميم. لكنه يذهب إلى إظهار مقدار ما هو ممكن مع CSS3 وقليل من البراعة.
