خصوصیت transition-property

مثال

روی عنصر div حرکت کنید و یک انتقال روان را با تغییر عرض مشاهده فرمایید:

div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}

div:hover {width:300px;}

در انتهای این آمورش، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

    

مرورگرهای Internet Explorer 10، Firefox، Chrome و Opera، خصوصیت transition-property را پشتیبانی می کنند.

Safari از خصوصیت جایگزین webkit-transition-property- استفاده می کنند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، تنظیم transition-property را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت transition-property می توان نام خصوصیت CSSی که انتقال روی آن خصوصیت صورت می گیرد را مشخص کرد. به عبارتی transition-property نام خصوصیت CSSی است که اگر بنحوی تغییر کند، انتقال یا transition صورت می گیرد.

نکته: انتقال معمولا هنگامی که موس را روی عنصری حرکت دهیم رخ می دهد.

توجه: همواره transition-duration را مشخص فرمایید، در غیر این صورت duration صفر است، و خصوصیت transition کار نمی کند.

مقدار پیشفرض all
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.transitionProperty="width,height"

نحوه استفاده

transition-property: none|all|property;
مقدار توضیحات
none

انتقال روی هیچ خصوصیتی تاثیر نمی گذارد.
all

تمام خصوصیت ها از انتقال تاثیر می پذیرند.
property

لیستی از خصوصیت ها که با کاما از همدیگر جدا شده اند را مشخص می کند که انتقال روی آنها تاثیر دارد.