timing-fucntion های محبوب و پرکاربرد

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

 
Quad Easing function
 


/* 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

 
Cubic Easing function
 


/* 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

 
Quart Easing function
 


/* 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

 
Quint Easing function


/* 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

 
Sine Easing function
 


/* 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

 
Expo Easing function
 


/* 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

 
Circ Easing function
 


/* 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

 
Back Easing function
 


/* 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);
}


4 دیدگاه برای “timing-function های پرکاربرد

  1. ممنون از مطالب خوبتون…
    مشکل این توابع اینه که تا حدی محدود هستن و نمیشه افکت‌های پیشرفته روی اون‌ها اعمال کرد…
    مسلما این مشکل توی جاوااسکریپت وجود نداره و میشه افکت‌های پیشرفته‌ای در قالب تابع، مخصوصا تو محیط canvas اعمال کرد…
    این پن یه نمونه از این توابع هستش :)

    https://codepen.io/Hossein_Rafie/full/LLXmOG/

    1. مرسی از پن خوگشلت حسین آقا.

      آره دیگه منم اینارو معرفی کردم برای کارهای ساده. آخه خیلی ها برای همچین چیزایی میرن یک کتابخونه js لود میکنند. آدم برای کشتن یه سوسک که از تانک استفاده نمیکنه، یه دمپایی کافیه :)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *