خاصية نقل CSS

قم بالمرور فوق عنصر <div> ، وقم بتغيير العرض باستخدام تأثير انتقال سلس:

div {
transition-property: width;
}

div:hover {
width: 300px;
}

المزيد من الأمثلة "جربها بنفسك" أدناه.

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

تحدد الخاصية اسم transition-propertyخاصية CSS التي يكون تأثير الانتقال لها (سيبدأ تأثير الانتقال عندما تتغير خاصية CSS المحددة).

نصيحة: يمكن أن يحدث تأثير الانتقال عادةً عندما يقوم المستخدم بتمرير الماوس فوق عنصر.

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

القيمة الافتراضية:	الكل
وارث:	رقم
متحرك:	رقم. اقرأ عن animatable
الإصدار:	CSS3
بناء جملة JavaScript:	الكائن .style.transitionProperty = "العرض ، الارتفاع"

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.

تحدد الأرقام المتبوعة بـ -webkit- أو -moz- أو -o- الإصدار الأول الذي يعمل مع بادئة.

Property
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

transition-property: none|all|property|initial|inherit;

Value	Description
none	No property will get a transition effect
all	Default value. All properties will get a transition effect
property	Defines a comma separated list of CSS property names the transition effect is for
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

مرر مؤشر الماوس فوق عنصر <div> ، وقم بتغيير العرض والارتفاع باستخدام تأثير انتقال سلس:

div {
transition-property: width, height;
}

div:hover {
width: 300px;
height: 300px;
}