timing-function های پرکاربرد

برای داشتن انیمیشن و ترنزیشن های واقعی تر و با معنا نیاز داریم تا مقدار timing-function را به خوبی تنظیم کنیم.

در سی اس اس مقادیر از پیش ساخته ای مانند ease، ease-in و غیره برای این ویژگی وجود دارند اما برای کنترل بهتر انیمیشن و ترنزیشن نیاز داریم تا از تابع cubic-bezier استفاده کنیم.

در ادامه معروف ترین مقادیری که برای این تابع وجود دارند و معمولا نام آنها را در کتابخانه های انیمیشن جاوااسکریپتی می بینیم معرفی شده اند.

linear

 

 

/* linear: cubic-bezier(0.250, 0.250, 0.750, 0.750) */
transition-timing-function: linear;

quad

 

 

/* ease-in-quad */
transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530);

/* ease-out-quad */
transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);

/* ease-in-out-quad */
transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);

cubic

 

 

/* ease-in-cubic */
transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

/* ease-out-cubic */
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

/* ease-in-out-cubic */
transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);

quart

 

 

/* ease-in-quart */
transition-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);

/* ease-out-quart */
transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);

/* ease-in-out-quart */
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);

quint

 

/* ease-in-quint */
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

/* ease-out-quint */
transition-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);

/* ease-in-out-quint */
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);

sine

 

 

/* ease-in-sine */
transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715);

/* ease-out-sine */
transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);

/* ease-in-out-sine */
transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);

expo

 

 

/* ease-in-expo */
transition-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035);

/* ease-out-expo */
transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);

/* ease-in-out-expo */
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);

circ

 

 

/* ease-in-circ */
transition-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);

/* ease-out-circ */
transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);

/* ease-in-out-circ */
transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);

back

 

 

/* ease-in-back */
transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);

/* ease-out-back */
transition-timing-function:  cubic-bezier(0.175, 0.885, 0.320, 1.275);

/* ease-in-out-back */
transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);

snap

/* snap */
transition-timing-function: cubic-bezier(0,1,.5,1);

همه در یک نگاه

 

See the Pen Popular timing functions by Mojtaba Seyedi (@seyedi) on CodePen.

 

نحوه استفاده

اگر از پیش پردازنده ای مانند Sass استفاده می کنید می توانید تمام این مقادیر را درون متغیر ذخیره کنید و به راحتی از آنها استفاده کنید و نیازی به حفظ کردن یا کپی کردن مقادیر از یک سایت و پروژه ای دیگر نداشته باشید.

همچنین اگر مشکلی برای پشتیبانی مرورگرها برای استفاده از متغیرها در سی اس اس ندارید می توانید بصورت زیر عمل کنید:

:root {

  --ease-in-quad:      cubic-bezier(0.550, 0.085, 0.680, 0.530);
  --ease-in-cubic:     cubic-bezier(0.550, 0.055, 0.675, 0.190);
  --ease-in-quart:     cubic-bezier(0.895, 0.030, 0.685, 0.220);
  --ease-in-quint:     cubic-bezier(0.755, 0.050, 0.855, 0.060);
  --ease-in-sine:      cubic-bezier(0.470, 0.000, 0.745, 0.715);
  --ease-in-expo:      cubic-bezier(0.950, 0.050, 0.795, 0.035);
  --ease-in-circ:      cubic-bezier(0.600, 0.040, 0.980, 0.335);
  --ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);

  --ease-out-quad:     cubic-bezier(0.250, 0.460, 0.450, 0.940);
  --ease-out-cubic:    cubic-bezier(0.215, 0.610, 0.355, 1.000);
  --ease-out-quart:    cubic-bezier(0.165, 0.840, 0.440, 1.000);
  --ease-out-quint:    cubic-bezier(0.230, 1.000, 0.320, 1.000);
  --ease-out-sine:     cubic-bezier(0.390, 0.575, 0.565, 1.000);
  --ease-out-expo:     cubic-bezier(0.190, 1.000, 0.220, 1.000);
  --ease-out-circ:     cubic-bezier(0.075, 0.820, 0.165, 1.000);
  --ease-out-back:     cubic-bezier(0.175, 0.885, 0.320, 1.275);

  --ease-in-out-quad:  cubic-bezier(0.455, 0.030, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  --ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  --ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
  --ease-in-out-sine:  cubic-bezier(0.445, 0.050, 0.550, 0.950);
  --ease-in-out-expo:  cubic-bezier(1.000, 0.000, 0.000, 1.000);
  --ease-in-out-circ:  cubic-bezier(0.785, 0.135, 0.150, 0.860);
  --ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);
  --snap:              cubic-bezier(0,1,.5,1);
  
}

/* نحوه استفاده: */

.element {
  transition: .3s transform var(--ease-in-out-quint);
}

موارد بی‌نام :)

transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);