سبد (0)

تبلیغات

خصوصیت transition-property

مثال (خصوصیت 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 Firefox Opera Google Chrome Safari

مرورگرهای 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

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


مثالs

مثال - خودتان امتحان کنید

Transition effect - change two properties

با موس روی عنصر div حرکت کنید، و یک انتقال آرام را در ارتفاع و عرض عنصر مشاهده فرمایید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی