سبد (0)

تبلیغات

خصوصیت transition

مثال (خصوصیت transition)

روی عنصر div حرکت کنید تا عرض عنصر به تدریج از 100 پیکسل به 300 پیکسل برسد:

div
{
width:100px;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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


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

با استفاده از فرم مختصر شده خصوصیت transition می توان چهار خصوصیت transition را یکجا تعریف کرد:

transition-property, transition-duration, transition-timing-function و transition-delay.

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

مقدار پیشفرض all 0 ease 0
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.transition="width 2s"

نحوه استفاده

transition: property duration timing-function delay;
مقدارتوضیحات
transition-property

 نام خصوصیت CSSی است که اگر بنحوی تغییر کند، انتقال یا transition صورت می گیرد.

transition-duration

مدت زمانی که انتقال انجام می شود را مشخص می کند.

transition-timing-function

 در طول یک انتقال، نحوه انجام آن را مشخص می کند. مقدار پیشفرض "ease" است.

transition-delay

مشخص می کند که انتقال پس از چه مدت تاخیر آغاز شود.

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