🎬 مُنشئ مفاتيح CSS
صمم تأثيرات CSS مفاتيح في ثوانٍ – حدد تحويل وشفافية في كل نقطة توقف، عرض التأثير الحركي مباشرة، ونسخ الكود @keyframes الجاهز لللصق. لا حاجة لتنزيل، لا تسجيل، يعمل بالكامل في متصفحك.
مصمم للخصوصية. تعمل هذه الأداة بالكامل في متصفحك — لا يتم رفع أي شيء تدخله أو تخزينه، وتعمل الأداة دون اتصال بالإنترنت.
حول
يتيح مُنشئ مفاتيح CSS لك إنشاء تأثيرات @keyframes دون كتابة سطر واحد من الكود يدويًا. تحدد خصائص التحويل – الترجمة (X وY)، التكبير، والدوران – بالإضافة إلى الشفافية عند ثلاث نقاط رئيسية: 0%، 50%، و100%. يمكن تكوين مدة التأثير، دالة التوقيت (سهل، خطي، سهل-الدخول، سهل-الخروج، سهل-الدخول-الخروج، أو دالة كوبية مخصصة)، وعدد التكرار (محدود أو لا نهائي) جميعها في اللوحة. يتم تحديث معاينة التأثير الحركي فورًا بحيث يمكنك ضبط القيم حتى يشعر الحركة بشكل صحيح. عندما تكون جاهزًا، انقر على نسخ، وستوضع كتلة @keyframes الكاملة – بما في ذلك اختصار التأثير – في حافظتك جاهزة للصق في ملف أسلوبك. يعمل كل شيء في المتصفح دون رفع أي ملفات أو إرسال أي بيانات.
كيف تستخدم
- حدد قيم التحويل — الترجمة X/Y، التمدد، والدوران — والشفافية لوقفة 0% (بداية التحريك).
- قم بتعديل قيم وقف 50% لتحديد نقطة المنتصف في الحركة، أو اتركها على الوضع الافتراضي لإنشاء انتقال بسيط بين حالتين.
- حدد قيم وقف 100% لحالة النهاية، ثم أعد تكوين المدة (بالثوانى)، ووظيفة التوقيت، وعدد التكرارات.
- راقب معاينة التحديث الحية في الوقت الفعلي وقم بتحسين أي قيمة حتى يبدو التحريك بالضبط كما تريد.
- اضغط على نسخ CSS لنسخ كتلة @keyframes الكاملة وخاصية التحريك إلى لصقها مباشرة في ملف الأسلوب الخاص بك.
الأسئلة الشائعة
- ما هي خصائص التحويل التي يمكنني تحريكها؟
- يمكنك تحريك translateX، translateY، scale، وrotate، بالإضافة إلى الشفافية. يتم تحديد كل خاصية بشكل مستقل في نقاط الإطار الزمني 0%، 50%، و100%.
- ما هي وظائف التوقيت المتاحة؟
- يحتوي المُنشئ على إعدادات سهلة، خطية، سهلة الدخول، سهلة الخروج، وسهلة الدخول والخروج، بالإضافة إلى خيار bezier مكعب مخصص لكي تتمكن من إنشاء منحنى تسارع فريد.
- هل يمكنني جعل التحريك يدور باستمرار؟
- نعم. قم بتعيين عدد التكرارات إلى لا نهائي، وستستخدم CSS المُنشئة animation-iteration-count: infinite، مما يجعل التحريك يدور باستمرار.
- هل أحتاج معرفة CSS لاستخدام هذه الأداة؟
- لا. المُنشئ بالكامل بصري — فقط اسحب المحددات واختر القيم من القوائم المنسدلة. يتم إنشاء CSS تلقائيًا ويكون جاهزًا لنسخه إلى أي مشروع.
- هل CSS المُنشئ متوافق مع جميع المتصفحات الحديثة؟
- نعم. يعتمد الإخراج على @keyframes القياسي وخاصية التحريك المختصرة، والتي تدعمها جميع المتصفحات الحديثة بما في ذلك كروم، فايرفوكس، سفاري، وإيدج دون أي مُحددات المتصفح.
- هل هذه الأداة ترفع بياناتي؟
- لا. يعمل كل شيء مباشرة في متصفحك، لذا بياناتك لن تغادر جهازك أبداً — بل إنها تعمل دون اتصال بالإنترنت بمجرد تحميل الصفحة.