طريقة استخدام خاصية transition في CSS3 وامثلة

خاصية transition في CSS3 تسمح لك بتحديد كيفية تحويل العنصر بين حالتين مختلفتين. هذا هوtransition-property,transition-duration,transition-timing-functionوtransition-delayالخصائص المختصرة

الجدول أدناه يوضح استخدام هذه الخاصية وتاريخ إصداراتها، بالإضافة إلى استخدامها في لغة الجافاسكربت.

استخدام نحو transition

نموذج هذه الخاصية هو:

transition:　transition1　[,　transition2, ... transitionN]　|　initial　|　inherit
　　　　　　　　　　　　حيث transition هي: [ transition-property | transition-duration | transition-timing-function | transition-delay ]

المثال التالي يوضح كيفية استخدام خاصية transition.

button　{
　　　　background:　#fd7c2a;
　　　　-webkit-transition-property:　background　2s;　/*　For　Safari　3.0+　*/
　　　　transition:　background　2s;　
}
button:hover　{
　　　　background:　#3cc16e;
}

قيمة الخاصية

جدول يلي يصف قيم هذه الخاصية.

توافق المتصفحات

توافق المتصفحات للخصائص transition، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفح يدعم هذه الخاصية؛ جميع المتصفحات الشائعة يدعمون هذه الخاصية.

قراءة إضافية

يرجى الرجوع إلى التعليمات التالية:Transitions CSS3.

خصائص مرتبطة:transition-delay,transition-duration,transition-property,transition-timing-function.