مُولِد انتقالات CSS انشئ انتقالات CSS مع خاصية قابلة للتخصيص، مدة، تخفيف، وتأثيرات عند التحويل.
مُولِد انتقالات CSS
انشئ انتقالات CSS مع خاصية قابلة للتخصيص، مدة، تخفيف، وتأثيرات عند التحويل.
تعيين خصائص الانتقال
اختر خاصية CSS التي تريد انتقالها، والمدة، ودالة التوقيت، والتأخير.
تحديد حالة الحوفر
حدد لون الخلفية للحوفر، والنسبة، ونصف قطر الحدود، وال دوران.
اختبار ونسخ
أشر إلى عنصر المعاينة لحوفر للتحقق من الانتقال، ثم انسخ CSS.
What Is مُولِد انتقالات CSS?
مُولِد انتقالات CSS يخلق انتقالات سلسة بين قيم خصائص CSS. على عكس Animations التي يمكن تشغيلها تلقائيًا، تتطلب الانتقالات.trigger -通常 حالة hover أو focus أو active. هذا الأداة تسمح لك بتهيئة كل معامل انتقالي: الخصائص المستهدفة، ومدة الانتقال، والوظيفة التخفيفية المستخدمة، ومدى التأخير قبل البدء. يتضمن الوظائف التخفيفية القياسية بالإضافة إلى إعدادات cubic-bezier الشهيرة مثل ease-in-back و ease-out-back و ease-in-out-back لتحقيق تأثيرات مرنة. قسم حالة الحَوَر يسمح لك بتعريف ما يتغير عند الحَوَر -لون الخلفية، والتماثل، ونصف قطر الحدود، والدوران- حتى تتمكن من رؤية اختبار الانتقال في الوقت الفعلي عن طريق وضع مؤشر الماوس على عنصر المعاينة.
Why Use مُولِد انتقالات CSS?
-
ضوابط انتقالية كاملة مع استهداف الخاصية
-
مسبقات كيوبيك بيزر مدمجة لتعديل التخفيف والارتداد
-
معاينة حوفر تفاعلية لاختبار الوقت الفعلي
-
توليد كود CSS لكل من الحالة الأساسية وحالة الحوفر
Common Use Cases
أثار الحوفر للأزرار
إنشاء انتقالات سلسة للون والنسبة للأزرار التفاعلية.
تفاعلات البطاقات
إضافة انتقالات الرفع والظل لحالة حوفر البطاقة.
animations القوائم
انتقالات سلسة لقوائم Dropdown و عناصر التنقل.
حالات التركيز على النماذج
تحرير تغييرات الحدود والظل عند تركيز الإدخال في النموذج.
Technical Guide
خصائص انتقالات CSS هي اختصار ل transition-property و transition-duration و transition-timing-function و transition-delay. يمكن أن تستهدف الخصائص خصائص محددة أو استخدام all لكل شيء. يستخدم الوقت والتأخير الثواني أو الألفية من الثانية. تحدد الوظيفة التوقيت المنحني: linear هو سرعة ثابتة، ease يبدأ ببطء ثم يتسارع ثم يتباطأ، ease-in يبدأ ببطء، ease-out ينتهي ببطء. تستخدم المنحنيات المخصصة وظيفة cubic-bezier(x1, y1, x2, y2) حيث تحدد القيم الأربع نقاط التحكم. tạo تأثيرات overshoot/bounce عند وجود قيم خارج 0-1 ل y. لأداء أفضل، قم بانتقال transform و opacity فقط عندما يكون ذلك ممكنًا. يمكن تعريف عدة انتقالات باستخدام قيم مفصولة بفواصل لخصائص مختلفة مع توقيتات مختلفة. تُشَعَّل الانتقالات بواسطة أي تغيير في الخصائص، بما في ذلك القيم المحددة بواسطة JavaScript وإضافات الفئات.
Tips & Best Practices
-
1استهدف خصائص محددة بدلاً من كل شيء للحصول على أداء أفضل
-
2استخدم قيم كيوبيك بيزر >1 لتنسيق y لإنتاج تأثيرات ارتداد
-
3احتفظ بالانتقالات أقل من 300 مللي ثانية للتفاعلات الواجهة المستخدمة للحصول على شعور سريع
-
4أضف الانتقال إلى الحالة الأساسية، وليس حالة الحوفر
Related Tools
مُحول أزرار CSS
صمم أزرار CSS مخصصة مع ألوان، حواف، حدود، ظلال، وأffects عند التمرير.
🎨 CSS & Design
مكان تجريبي لتحويلات CSS
جرب تحويلات CSS بما في ذلك الدوران والتكبير والانحناء والانتقال مع منظور ثلاثي الأبعاد.
🎨 CSS & Design
مُولِد حركة CSS
أنشئ animations keyframe في CSS مع تأثيرات مسبقة ووقت قابل للتعديل.
🎨 CSS & Design
مُولِد ظل CSS
أنشئ ظلال CSS متعددة الطبقات مع خيارات الإدراج وتحديثات في الوقت الفعلي.
🎨 CSS & DesignFrequently Asked Questions
Q ما الفرق بين الانتقال والتحريك?
Q هل يمكنني انتقال خصائص متعددة?
Q ما دالة التخفيف التي يجب أن أستخدمها؟
Q لماذا لا يعمل انتقالي?
Q هل يمكن جميع خصائص CSS الانتقالية؟
About This Tool
مُولِد انتقالات CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.