6XC

منشئ الانتقال CSS (transition)

اضبط انتقالًا — الخاصية، المدة، دالة التوقيت، والتأخير — واختبره مباشرة بنقرة واحدة.

913 مشاهدة

خاصية transition

الصيغة: transition: خاصية مدة دالة-توقيت تأخير. تُنشّط الانتقال عند التغييرات الناتجة عن hover أو focus أو تبديل الأصناف (classes). دالة التوقيت تحدد إحساس الحركة: ease هي القيمة الافتراضية الطبيعية، ease-out تناسب حركات الظهور، ومنحنيات cubic-bezier المخصصة تُنتج ارتدادًا مرنًا. اضغط زر الاختبار لمشاهدة إعداداتك أثناء العمل.

الأسئلة الشائعة

ما الخصائص الرخيصة التحريك؟

transform وopacity — يمكن للمتصفح تركيبهما على GPU دون إعادة حساب التخطيط. تحريك width أو height أو top يفرض إعادة حساب التخطيط في كل إطار وقد يسبب تقطعًا.

ما المدة الافتراضية الجيدة؟

150-250 مللي ثانية لردود فعل الواجهة الصغيرة (الأزرار، hover) و300-500 مللي ثانية للحركات الأكبر. فوق ~700 مللي ثانية تبدأ الواجهة بالشعور بالبطء.

أدوات مشابهة

منشئ تدرجات CSS صمّم تدرجات CSS خطية ودائرية ومخروطية مع معاينة حية، وانسخ الكود مباشرة. أنشئ منشئ ظل الصندوق CSS صمّم ظل الصندوق (box-shadow) بصريًا — الإزاحات، التمويه، الانتشار، اللون، الشفافية وinset — مع معاينة حية. أنشئ منشئ استدارة الحواف CSS دوّر كل زاوية على حدة أو جميعها معًا، بوحدة px أو %، مع معاينة حية وكود CSS قابل للنسخ. أنشئ منشئ ظل النص CSS صمّم ظل نص (text-shadow) بتحديد الإزاحة والتمويه واللون والشفافية — مع معاينة حية على نص تجريبي. أنشئ