CSS Transition Generator
Configure CSS transitions with hover preview.
انتقال 1
حرك المؤشر هنا
.element {
transition: all 0.3s ease 0s;
}
.element:hover {
/* apply your hover styles here */
}حول هذه الأداة
يتيح منشئ انتقالات CSS تكوين خاصية الاختصار transition من خلال تحديد الخاصية المستهدفة والمدة ودالة التوقيت والتاخير. تتيح المعاينة التفاعلية رؤية السلوك قبل نسخ الكود.
تنشئ انتقالات CSS تغييرات سلسة في الحالة بين قيمتين CSS، يتم تشغيلها بواسطة الفئات الزائفة مثل :hover و:focus او تغييرات الفئات عبر JavaScript.
كيفية الاستخدام
- حدد خاصية CSS للانتقال (او استخدم all).
- حدد المدة — المدة الزمنية للانتقال (مثلا: 0.3s).
- اختر دالة توقيت للتحكم في منحنى التسارع.
- اضف تاخيرا اختياريا قبل بدء الانتقال.
- حرك المؤشر على مربع المعاينة لرؤية التاثير مباشرة، ثم انسخ CSS.
حالات الاستخدام
يستخدم المطورون الانتقالات لتاثيرات التمرير على الازرار وتكبير البطاقات وتغييرات الالوان في روابط التنقل.
الأسئلة الشائعة
- ما الفرق بين transition وanimation؟ — تتفاعل الانتقالات مع تغيير الحالة (مثل التمرير)؛ الرسوم المتحركة تعمل تلقائيا او في حلقة باستخدام الاطارات الرئيسية.
- هل يمكنني انتقال خصائص متعددة؟ — نعم. انقر على "اضافة انتقال" لاضافة قواعد خصائص متعددة مفصولة بفواصل.
- اي الخصائص يمكن انتقالها؟ — معظم الخصائص ذات القيم الرقمية: opacity وcolor وtransform والابعاد وغيرها. الخصائص مثل display لا يمكن انتقالها.