گروه مقاله : CSS3
تاريخ انتشار : 1394/03/05 - 14:12
كد :599
در CSS3، در صورت تغییر ویژگی های یک عنصر، می توانیم این تغییر را بصورت تدریجی مشاهده نماییم. (بدون استفاده از Flash یا JavaScript)
transition در CSS3، افکتی است که اجازه می دهد یک عنصر از یک Style به Styleی دیگر بتدریج تغییر نماید.
پشتیبانی مرورگرها
|
Property |
|
|
|
|
|
|
transition |
10.0 |
26.0
4.0 -webkit- |
16.0
4.0 -moz- |
6.1
3.1 -webkit- |
12.1
10.5 -o- |
|
transition-delay |
10.0 |
26.0
4.0 -webkit- |
16.0
4.0 -moz- |
6.1
3.1 -webkit- |
12.1
10.5 -o- |
|
transition-duration |
10.0 |
26.0
4.0 -webkit- |
16.0
4.0 -moz- |
6.1
3.1 -webkit- |
12.1
10.5 -o- |
|
transition-property |
10.0 |
26.0
4.0 -webkit- |
16.0
4.0 -moz- |
6.1
3.1 -webkit- |
12.1
10.5 -o- |
|
transition-timing-function |
10.0 |
26.0
4.0 -webkit- |
16.0
4.0 -moz- |
6.1
3.1 -webkit- |
12.1
10.5 -o- |
مرورگرهای Internet Explorer 10, Firefox, Chrome, Opera خصوصیت transition را پشتیبانی می کنند.
مرورگر Safari به پیشوند -webkit- نیاز دارد.
نکته: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.
نکته: مرورگر Chrome 25 و نسخه های قبلی آن، به پیشوند -webkit- نیاز دارد.
چگونه از Transition استفاده کنیم ؟
برای ایجاد یک افکت Transition باید دو چیز را مشخص کرد:
-
خاصیت CSS که می خواهید انتقال در ازای تغییر آن انجام شود.
-
مدت زمان انجام انتقال
نکته : در صورتی که هیچ زمانی تنظیم نشود، افکتی رخ نخواهد داد چون زمان پیش فرض 0 ثانیه است.
مثال زیر یک عنصر <div> قرمز رنگ با ابعاد 100px * 100px را نشان می دهد که انتقال روی خصوصیت width، با مدت زمان 2 ثانیه صورت گرفته:
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
اکنون یک ویژگی جدید برای خاصیت Width تعیف می کنیم ، بنام hover (زمانیکه ماوس روی عنصر <div> قرار بگیرد ):
div:hover {
width: 300px;
}
به این نکته دقت کنید که زمانی که موس از روی عنصر خارج می شود، width عنصر بتدریج به مقدار اولیه خود تغییر می کند.
تغییر همزمان چند ویژگی در Transition
با جدا کردن خصوصیت ها و زمان با کاما می توانید همزمان چند تغییر را تعریف کنید.
در مثال زیر، خصوصیات width و height به صورت همزمان تغییر می کنند (width در 2 ثانیه و height در 4 ثانیه):
div {
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}
در مثال های زیر، از تمام خصوصیت های انتقال استفاده شده است:
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:
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}