انتقال یا گذر در CSS3
Transition یا انتقال در CSS3
در CSS3، در صورت تغییر ویژگی های یک عنصر، می توانیم این تغییر را بصورت تدریجی مشاهده نماییم. (بدون استفاده از Flash یا JavaScript)
پشتیبانی مرورگرها از خصوصیت Transition
خاصیت | پشتیبانی مرورگرها | ||||
---|---|---|---|---|---|
transition |
مرورگرهای Internet Explorer 10, Firefox, Chrome, Opera خصوصیت transition را پشتیبانی می کنند.
مرورگر Safari به پیشوند -webkit- نیاز دارد.
توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.
توجه: مرورگر Chrome 25 و نسخه های قبلی آن، به پیشوند -webkit- نیاز دارد.
Transition چگونه کار می کند؟
transition در CSS3، افکتی است که اجازه می دهد یک عنصر از یک Style به Styleی دیگر بتدریج تغییر نماید.
برای انجام آن، حداقل باید دو چیز را مشخص نمایید:
-
خصوصیت CSSی که می خواهید انتقال در ازای تغییر آن انجام شود.
-
مدت زمان انجام انتقال
مثال (انتقال یا گذر در CSS3)
انتقال روی خصوصیت width، با مدت زمان 2 ثانیه:
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
توجه: در صورتی که هیچ زمانی تنظیم نشود، افکتی رخ نخواهد داد چون زمان پیش فرض 0 ثانیه است.
افکت زمانی رخ می دهد که مقدار خصوصیت مشخص شده در transition تغییر کند. به عنوان نمونه این تغییر می تواند زمانی رخ دهد که موس روی عنصر، قرار می گیرد:
مثال (انتقال یا گذر در CSS3)
مشخص کردن hover: برای عنصر <div>:
{
width:300px;
}
توجه: زمانی که موس از روی عنصر خارج می شود، width عنصر بتدریج به مقدار اولیه خود تغییر می کند.
تنظیم همزمان چند تغییر در Transition
با جدا کردن خصوصیت ها و زمان با کاما می توانید همزمان چند تغییر را تعریف کنید:
مثال (انتقال یا گذر در CSS3)
اضافه کردن افکت روی width، height و transform:
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
خصوصیت های انتقال در CSS3
در جدول زیر، لیست تمام خصوصیت های انتقال آورده شده است:
خصوصیت | توضیحات | CSS |
---|---|---|
transition | تمام خصوصیت های انتقال را بصورت مختصر مشخص می کند. | 3 |
transition-property | نام خصوصیت CSSی است که اگر بنحوی تغییر کند، انتقال یا transition صورت می گیرد. | 3 |
transition-duration | مدت زمان انتقال را مشخص می کند. مقدار پیشفرض 0 است. | 3 |
transition-timing-function | در طول یک انتقال، نحوه انجام آن را مشخص می کند. مقدار پیشفرض "ease" است. | 3 |
transition-delay | بعد از چه مدت، انتقال شروع شود. مقدار پیشفرض 0 است. | 3 |
در دو مثال زیر، از تمام خصوصیت های انتقال استفاده شده است:
مثال (انتقال یا گذر در CSS3)
استفاده از تمام خصوصیت های انتقال در یک مثال:
{
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:
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 22998