خصوصیت های انتقال در CSS3
در جدول زیر، لیست تمام خصوصیت های انتقال آورده شده است:
| خصوصیت | توضیحات | CSS |
|---|---|---|
| transition | تمام خصوصیت های انتقال را بصورت مختصر مشخص می کند. | 3 |
| transition-property | نام خصوصیت CSSی است که اگر بنحوی تغییر کند، انتقال یا transition صورت می گیرد. | 3 |
| transition-duration | مدت زمان انتقال را مشخص می کند. مقدار پیشفرض 0 است. | 3 |
| transition-timing-function | در طول یک انتقال، نحوه انجام آن را مشخص می کند. مقدار پیشفرض "ease" است. | 3 |
| transition-delay | بعد از چه مدت، انتقال شروع شود. مقدار پیشفرض 0 است. | 3 |
در دو مثال زیر، از تمام خصوصیت های انتقال استفاده شده است:
مثال (خصوصیت های انتقال در CSS3)
استفاده از تمام خصوصیت های انتقال در یک مثال:
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
خودتان امتحان کنید »{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
مثال (خصوصیت های انتقال در CSS3)
تنظیم تمام خصوصیت های مثال قبل، با استفاده از خصوصیت مختصر transition:
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
خودتان امتحان کنید »{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
