40% تخفیف با کد Mehr روی تمام آموزش ها بمناسبت فرارسیدن ماه مهر ...!
زمان باقی مانده (تمدید شد)
سبد (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 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مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان