تابز مدیا | آموزش قدم به قدم برنامه نویسی

Transition Timing Function

ویژگی transition-timing-function مشخص می‌کنه سرعت تغییر در طول انیمیشن چطور توزیع بشه.
به عبارت دیگه می‌گه انیمیشن خطی باشه یا با شتاب شروع کنه یا با شتاب تموم بشه و …

📑 کلاس‌های آماده در Tailwind

کلاس	CSS متناظر	توضیح
`ease-linear`	`transition-timing-function: linear;`	سرعت یکنواخت از اول تا آخر
`ease-in`	`transition-timing-function: cubic-bezier(0.4, 0, 1, 1);`	شروع کند → پایان سریع
`ease-out`	`transition-timing-function: cubic-bezier(0, 0, 0.2, 1);`	شروع سریع → پایان کند
`ease-in-out`	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);`	شروع و پایان نرم، وسط سریع

📌 مثال ساده


<div class="flex gap-6">
  <!-- Linear -->
  <div class="w-16 h-16 bg-blue-500 transition-transform duration-700 ease-linear hover:translate-x-32"></div>

  <!-- Ease-in -->
  <div class="w-16 h-16 bg-green-500 transition-transform duration-700 ease-in hover:translate-x-32"></div>

  <!-- Ease-out -->
  <div class="w-16 h-16 bg-red-500 transition-transform duration-700 ease-out hover:translate-x-32"></div>

  <!-- Ease-in-out -->
  <div class="w-16 h-16 bg-purple-500 transition-transform duration-700 ease-in-out hover:translate-x-32"></div>
</div>

🔹 وقتی ماوس رو ببری روی مربع‌ها، هر کدوم با سرعت متفاوتی حرکت می‌کنن.

⚡ نکته حرفه‌ای

اگر بخوای cubic-bezier اختصاصی تعریف کنی، می‌تونی توی tailwind.config.js اضافه‌ش کنی. مثلاً:


module.exports = {
  theme: {
    extend: {
      transitionTimingFunction: {
        'bounce': 'cubic-bezier(.28,.84,.42,1)', 
      }
    }
  }
}

بعدش استفاده می‌کنی:


<div class="transition-transform duration-700 ease-bounce hover:translate-y-10"></div>