آموزش CSS – ویژگی Transition در CSS3

در جلسه قبل از آموزش CSS با ویژگی transform در CSS3 آشنا شدید. در این بخش قصد داریم به ویژگی Transition در CSS3 یپردازیم.

قابلیت Transition در CSS3 به شما اجازه می دهد که مقادیر ویژگی های CSS را بصورت نرم در یک زمان مشخص انجام بدید

درگ ویژگی Transition در CSS3

بطور عادی زمانی که مقدار یک خصوصیت CSS تغییر می کند, نتیجه رندر شده بلافاصله آپدیت می شود. یک مثال معمول تغییر پس زمینه دکمه با رفتن ماوس روی آن است.

در این سناریوی ساده پس زمینه دکمه با رفتن ماوس روی دکمه بلافاصله از مقدار ویژگی قبلی به ویژگی جدید تغییر می کند.

CSS3 قابلیت جدید Transition در CSS3 را معرفی کرده است که به شما اجازه می دهد یک خصوصیت را بصورت انیمیشنی و نرم از مقدار قدیمی به جدید طی یه بازه زمانی تغییر بدید.

مثال زیر به شما یک نمونه از انیمیشن تغییر background-color دکمه HTML با رفتن ماوس روی آن را نشان می دهد.

button {
    background: #fd7c2a;
    /* For Safari 3.0+ */
    -webkit-transition-property: background;
    -webkit-transition-duration: 2s;
    /* Standard syntax */
    transition-property: background;
    transition-duration: 2s;
}
button:hover {
    background: #3cc16e;
}

button {

background: #fd7c2a;

/* For Safari 3.0+ */

-webkit-transition-property: background;

-webkit-transition-duration: 2s;

/* Standard syntax */

transition-property: background;

transition-duration: 2s;

}

button:hover {

background: #3cc16e;

}

برای رخ دادن transition , نیاز است حداقل دو مورد را مشخص کنید:

نام ویژگی css که باید افکت روی آن اعمال شود که با استفاده از transition-property انجام می شود.
و مدت زمان افکت transition (بزرگتر از ۰) که با transition-duration ست می شود.

به هر حال, دیگر قابلیت های transition اختیاری است و ست نکردن آن ها اختلالی در ایجاد این افکت نمی کند.

نکته: همه خصوصیات css قابلیت انیمیشنی را ندارند. بطور معمول, هر خصوصیت css ای که مقادیر عددی, طول, درصد یا رنگ را می پذیرد این قابلیت را دارند.

اجرای چندین transition

هر یک از ویژگی های Transition در CSS3 می توانند بیشتر از یک مقدار را بگیرند که با کاما جدا می شوند که یک راه آسان transition چندگانه با تنظیمات مختلف همین راه است

button {
    background: #fd7c2a;
    border: 3px solid #dc5801;
    /* For Safari 3.0+ */
    -webkit-transition-property: background, border;
    -webkit-transition-duration: 1s, 2s;
    /* Standard syntax */
    transition-property: background, border;
    transition-duration: 1s, 2s;
}
button:hover {
    background: #3cc16e;
    border-color: #288049;
}

button {

background: #fd7c2a;

border: 3px solid #dc5801;

/* For Safari 3.0+ */

-webkit-transition-property: background, border;

-webkit-transition-duration: 1s, 2s;

/* Standard syntax */

transition-property: background, border;

transition-duration: 1s, 2s;

}

button:hover {

background: #3cc16e;

border-color: #288049;

}

دستور خلاصه نویسی Transition در CSS3

ویژگی های زیادی هنگام ست کردن transition می توان استفاده کرد. همچنین مشخص کردن همه ویژگی های transition در یک خصوصیت یکسان را در کد کوتاه تر وجود دارد.

ویژگی transition یک ویژگی کوتاه برای اعمال همه قابلیت های transition جدا در یک دستور است (مثل transition-property, transition-duration, transition-timing-function, transition-delay)

بسیار اهمیت دارد که این ترتیب بالا برای مقادیر را هنگام استفاده از این خصوصیت, رعایت کنید.

button {
    background: #fd7c2a;
    -webkit-transition: background 2s ease-in 0s; /* For Safari 3.0+ */
    transition: background 2s ease-in 0s; /* Standard syntax */
}
button:hover {
    background: #3cc16e;
}

button {

background: #fd7c2a;

-webkit-transition: background 2s ease-in 0s; /* For Safari 3.0+ */

transition: background 2s ease-in 0s; /* Standard syntax */

}

button:hover {

background: #3cc16e;

}

نکته: اگر هر یک از مقادیر مشخص نشده بود, مقدار پیش فرض آن در نظر گرفته می شود. به این معنی که اگر مقدار transition-duration مشخص نبود, هیچ transition ی اعمال نمی شود چرا که مقدار پیش فرض ۰ است.

خصوصیات Transition در CSS3

جدول زیر یک خلاصه کوتاه از تمام ویژگی های Transition در CSS3 را ارایه می دهد:

ویژگی	توضیحات
`transition`	یک دستور خلاصه نویسی به منظور تعریف تمام قابلیت های transition در css3 بصورت یکجا
`transition-delay`	مشخص می کند که قبل از اجرای transition یک وقفه چندثانیه ای ایجاد شود
`transition-duration`	مدت زمان به ثانیه یا میلی ثانیه که مشخص می کند چه مدت برای تکمیل transition طی شود.
`transition-property`	مشخص می کند که روی چه ویژگی ای از css اعمال شود مثلا `color` یا میتونید `all` را برای تمام ویژگی ها قرار بدید
`transition-timing-function`	برای تعیین سرعت تغییر ویژگی یک عنصر دارای transition در گذر زمان, استفاده می شود