خصائص transition Style

التعريف والاستخدام

transition الخصائص هي خاصية مختصرة لأربعة خصائص تحويل:

ملاحظة:أرجو أن تقوم دائمًا بتحديد خصائص transitionDuration، وإلا سيكون وقت التحويل 0، وسيكون التحويل غير صالح.

انظر أيضًا:

دليل CSS:خصائص transition

مثال

ضع فأرة الماوس فوق عنصر div لتغيير مظهره بشكل تدريجي:

document.getElementById("myDIV").style.transition = "all 2s";

جرب بنفسك

النحو

يعود خصائص transition:

object.style.transition

إعداد خصائص transition:

object.style.transition = "property duration timing-function delay|initial|inherit"

قيمة الخاصية

القيمة الوصف
transitionProperty يحدد اسم الخاصية التي يأثر عليها تأثير التحويل.
transitionDuration يحدد الوقت الذي يستغرقه تأثير التحويل أو الميليسي ثانية.
transitionTimingFunction يحدد مسار سرعة تأثير التحويل.
transitionDelay يحدد متى تبدأ تأثيرات التحويل.
initial يُعين هذا الخصائص بقيمته الافتراضية. يرجى الرجوع إلى initial.
inherit يرث هذا الخصائص من العنصر الأب. يرجى الرجوع إلى inherit.

تفاصيل التقنية

القيمة الافتراضية: all 0 ease 0
القيمة التي تعود: خطاب، يوضح خصائص transition.
إصدار CSS: CSS3

دعم المتصفح

رقم في الجدول يوضح إصدار المتصفح الذي يدعم هذا الخصائص بشكل كامل.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1