توضیح در مورد easing-function در CSS

اگه تا حالا با انیمیشن‌ها در CSS کار کرده باشی، احتمالاً با easing-function یا همون تابع‌های تغییر میزان سرعت آشنا شدی. این توابع در طراحی سایت‌ها و اپلیکیشن‌ها خیلی کاربرد دارن و می‌تونن حس و حال حرکات در انیمیشن‌ها رو تحت کنترل قرار بدن. به زبان ساده، این توابع به ما اجازه می‌دن تا تعیین کنیم که یک انیمیشن در طول زمان چطور سریع یا کند بشه.

معمول‌ترین توابع تغییر میزان سرعت تو CSS شامل linear، ease، ease-in، ease-out و ease-in-out هستن. هر کدوم از این توابع یک الگوی خاص برای تغییر سرعت در طول انیمیشن دارن. به عنوان مثال، linear یه حرکت ثابت و یکنواخت رو فراهم می‌کنه، در حالی که ease-in اجازه می‌ده انیمیشن از یه نقطه آهسته شروع بشه و به تدریج سریع‌تر بشه.

زمانی که می‌خوایم با استفاده از easing-function یه حس طبیعی‌تر و جذاب‌تر به انیمیشن‌هامون بدیم، خیلی مهمه که بدونیم دقیقاً هر کدوم از این توابع چه عملکردی داره. مثلاً زمانی که می‌خوایم یه عنصر به آرامی وارد صحنه بشه و به سرعت وسط صحنه برسه، می‌تونیم از ease-out استفاده کنیم. ولی اگه بخوایم برعکس این کارو انجام بدیم، از ease-in استفاده می‌کنیم.

توابع پیشرفته‌تر مثل cubic-bezier هم وجود داره که به طراح‌ها قابلیت تعریف دقیق‌تر و اختیاری‌تر منحنی سرعت رو می‌ده. از این توابع می‌شه برای طراحی انیمیشن‌های خاص و پیچیده‌تر استفاده کرد. در ادامه یه مثال با استفاده از cubic-bezier براتون گذاشتم.

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: all 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  .box:hover {
    transform: translateX(200px);
  }
</style>

توضیح خط به خط کد

<style> - این تگ برای تعریف استایل‌های CSS استفاده می‌شه و توی سند HTML قرار می‌گیره.

.box - کلاس CSS برای عنصری که می‌خوایم انیمیشن روش اعمال کنیم.

transition: all 2s cubic-bezier(0.68, -0.55, 0.27, 1.55); - تعریف میزان تغییر سرعت انیمیشن با استفاده از cubic-bezier به مدت 2 ثانیه.

.box:hover - استایلی که وقتی موس روی عنصر می‌ره استفاده می‌شه.

transform: translateX(200px); - عملیاتی که وقتی موس روی عنصر می‌ره اجرا می‌شه و عنصر به سمت راست حرکت می‌کنه.