برای داشتن انیمیشن و ترنزیشن های واقعی تر و با معنا نیاز داریم تا مقدار 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);
خیلی عالی
ممنون از شما
واقعا مفیدن
ممنون. خوشحالم که مفید بوده.
ممنون از مطالب خوبتون…
مشکل این توابع اینه که تا حدی محدود هستن و نمیشه افکتهای پیشرفته روی اونها اعمال کرد…
مسلما این مشکل توی جاوااسکریپت وجود نداره و میشه افکتهای پیشرفتهای در قالب تابع، مخصوصا تو محیط canvas اعمال کرد…
این پن یه نمونه از این توابع هستش :)
https://codepen.io/Hossein_Rafie/full/LLXmOG/
مرسی از پن خوگشلت حسین آقا.
آره دیگه منم اینارو معرفی کردم برای کارهای ساده. آخه خیلی ها برای همچین چیزایی میرن یک کتابخونه js لود میکنند. آدم برای کشتن یه سوسک که از تانک استفاده نمیکنه، یه دمپایی کافیه :)