%45 تخفیف، با کد Fetr روی تمام آموزش ها، بمناسبت عید سعید فطر
زمان باقی مانده
سبد (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 مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان