آموزش Transition در CSS

transitionها به ما امکان می دهند تا به آرامی در یک زمان داده شده، مقادیر ویژگی ها(property values) را تغییر دهیم. ماوس خود را روی عنصر زیر ببرید تا یک افکت transition را مشاهده کنید:

در این مقاله، در مورد ویژگی های زیر نکاتی را ذکر خواهیم نمود:

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

چگونه از Transition استفاده کنیم؟

برای ایجاد یک افکت transition باید دو چیز را مشخص کنیم:

1. ویژگی CSS ای، که می خواهیم افکت به آن اضافه شود.
2. مدت زمان افکت

نکته: اگر مدت زمان مشخص نشود، transition تاثیری نخواهد داشت؛ زیرا مقدار پیش فرض آن 0 است.

مثال زیر، یک عنصر <div> قرمز  100px * 100px را نشان می دهد. برای این عنصر <div>، یک افکت transition برای ویژگی width ، با مدت زمان 2 ثانیه تعریف شده است.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

این افکت transition هنگامی شروع می شود که ویژگیِ CSS مشخص شده(width) مقدارش تغییر کند. اکنون، اجازه دهید وقتی که یک کاربر ماوس خود را روی عنصر <div> ما می برد، یک مقدار جدید برای ویژگی width مشخص کنیم:

div:hover {
  width: 300px;
}

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

تغییر دادن مقادیر چند ویژگی

در مثال زیر، یک افکت transition برای هردوی ویژگی های عرض(width) و ارتفاع(height) عنصر، اضافه شده است؛ که برای عرض، 2 ثانیه و برای ارتفاع 4 ثانیه طول می کشد:

div {
  transition: width 2s, height 4s;
}

ویژگی transition-timing-function سرعت منحنی(speed curve) افکت transition را مشخص می کند. ویژگی transition-timing-function می تواند یکی از مقادیر زیر را داشته باشد:

1. ease : یک افکت transition را مشخص می کند که شروعی آهسته دارد و سپس سریع می شود سپس به آرامی پایان می یابد(این پیش فرض است).
2. linear : یک افکت transition را مشخص می کند که سرعت آن از ابتدا تا انتها یکسان است.
3. ease-in : یک افکت transition را مشخص می کند که شروعی آهسته دارد.
4. ease-out : یک افکت transition را مشخص می کند که پایانی آهسته دارد.
5. ease-in-out : یک افکت transition را مشخص می کند که شروع و پایانی آهسته دارد.
6. cubic-bezier(n,n,n,n) : به ما امکان می دهد تا مقادیر دلخواه خود را در یک تابع cubic-bezier تعریف کنیم. 

 در مثال زیر، برخی از سرعت های مختلف منحنی که می توانند مورد استفاده قرار گیرند، نشان داده شده است:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

 تاخیر یا Delay برای افکت Transition

با استفاده از ویژگی transition-delay می توانیم یک تاخیر به ثانیه را برای افکت transition مشخص کنیم. در مثال زیر، قبل از اینکه شرع کنیم، 1 ثانیه تاخیر داریم:

div {
  transition-delay: 1s;
}

 استفاده از Transition + Transformation

در مثال زیر، در یک تبدیل(transformation) از یک transition اضافه شده است:

div {
  transition: width 2s, height 2s, transform 2s;
}

مثال های بیشتری در مورد Transition

ویژگی های transition در CSS را می توانیم به صورت یک به یک، مانند زیر تعریف کنیم:

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

یا اینکه می توانیم از کد خلاصه شده ی transition زیر استفاده کنیم:

div {
  transition: width 2s linear 1s;
}

 ویژگی های Transition در CSS

در جدول زیر، لیست تمام ویژگی های transition در CSS نشان داده شده است: