مثال
تحوم فوق <div> العنصر، وتغيير عرض مع وجود تأثير الانتقال السلس:
div
{
-webkit-transition-property: width; /* Safari */
transition-property: width;
}
div:hover {
width: 300px;
} انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف واستخدام
تحدد الخاصية انتقال الملكية من اسم الخاصية CSS تأثير الانتقال هو (the transition effect will start when the specified CSS property changes) .
Tip: تأثير التحول يمكن أن يحدث عادة عندما تحوم المستخدم على عنصر.
Note: دوما تحديد الملكية الانتقال المدة، وإلا فإن المدة هي 0، وسوف تمر بمرحلة انتقالية لن يكون لها تأثير.
| القيمة الافتراضية: | all |
|---|---|
| وارث: | no |
| Animatable: | no. Read about animatable |
| الإصدار: | CSS3 |
| جافا سكريبت بناء الجملة: | object .style.transitionProperty="width,height" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit-، -moz- أو -o- تحدد النسخة الأولى التي عملت مع بادئة.
| خاصية | |||||
|---|---|---|---|---|---|
| transition-property | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
CSS بناء الجملة
transition-property: none|all|property|initial|inherit;قيم الملكية
| القيمة | وصف |
|---|---|
| none | لن الملكية الحصول على تأثير انتقال |
| all | القيمة الافتراضية. جميع خصائص سوف تحصل على تأثير انتقال |
| property | تعرف على قائمة مفصولة بفواصل من أسماء خصائص CSS تأثير الانتقالية ل |
| initial | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي |
| inherit | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة |
مزيد من الأمثلة
مثال
تحوم فوق <div> العنصر، وتغيير العرض والارتفاع مع وجود تأثير الانتقال السلس:
div {
-webkit-transition-property: width, height; /*
Safari */
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
} انها محاولة لنفسك » صفحات ذات صلة
درس CSS: CSS3 التحولات
HTML DOM المرجع transitionProperty property