خصوصیت transition
مثال (خصوصیت transition)
روی عنصر div حرکت کنید تا عرض عنصر به تدریج از 100 پیکسل به 300 پیکسل برسد:
{
width:100px;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}
پشتیبانی مرورگرها
مرورگرهای 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 |
نام خصوصیت CSSی است که اگر بنحوی تغییر کند، انتقال یا transition صورت می گیرد. |
| transition-duration |
مدت زمانی که انتقال انجام می شود را مشخص می کند. |
| transition-timing-function |
در طول یک انتقال، نحوه انجام آن را مشخص می کند. مقدار پیشفرض "ease" است. |
| transition-delay |
مشخص می کند که انتقال پس از چه مدت تاخیر آغاز شود. |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 9543
دیدگاه‌ها
سلام
من میخوام از این ویژگی برای باز و بسته شدن زیر منوهام استفاده کنم تا وقتی موس روی منو قرار گرفت، زیر منوی مربوطه آرام باز و پس از رفتن موس آرام بسته شود اما نمیدونم چطوری باید اعمالش کنم. ممنون میشم راهنمایی بفرمایید.