مولد تفاعل مفاتيح CSS

مولد تفاعل مفاتيح CSS

أنشئ تفاعلات CSS @keyframes بعرض مباشر. اختر من بين 10 مُسبَّب مُتَوَسِّط مثل تَرَكُّب، تَرَكُّب، نَبض، تَمَكُّن، مُدخل من اليسار، دوران، تَمَكُّن، مُتَوَسِّط، نَبض، وتَرَكُّب — أو اصنع تفاعل مُتَوَسِّط مخصص من الصفر. قم بتعديل المدة، التمَكُّن، عدد التكرارات، الاتجاه، ووضع التعبئة، ثم نسخ الكود المُولَّد.

كيفية استخدام

اختر تفاعل مُتَوَسِّط أو ابدأ بتفاعل مخصص. قم بتكوين إعدادات التفاعل — الاسم، المدة، دالة التمَكُّن، عدد التكرارات، الاتجاه، ووضع التعبئة. قم بتعديل نقاط التفاعل من خلال تحديد النسبة المئوية، قيمة التحويل، ودرجة الشفافية لكل نقطة. أضف أو احذف نقاط التفاعل حسب الحاجة. راقب التحديث المباشر للعرض في الوقت الفعلي، ثم نسخ الكود المُولَّد.

خصائص

• 10 مُسبَّب مُتَوَسِّط – تَرَكُّب، تَرَكُّب، نَبض، تَمَكُّن، مُدخل من اليسار، دوران، تَمَكُّن، مُتَوَسِّط، نَبض، وتَرَكُّب جاهز للإستخدام
• مُحرِّر نقاط التفاعل المُتَوَسِّط – أضف، احذف، وقم بتعديل نقاط التفاعل من خلال تحكم في النسبة المئوية، التحويل، ودرجة الشفافية
• عرض تفاعل مباشر – راقب تفاعلك على عنصر مُعرض في الوقت الفعلي أثناء إجراء التغييرات
• التحكم الكامل في التفاعل – قم بتكوين المدة، التمَكُّن (بما في ذلك مخصص cubic-bezier)، عدد التكرارات، الاتجاه، ووضع التعبئة
• مخرجات CSS نظيفة – يُولِّد قاعدة @keyframes وخصائص التفاعل المختصر جاهزة للإدخال في ملفك