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

Transition Delay

ویژگی transition-delay مشخص می‌کنه انیمیشن بعد از چند میلی‌ثانیه/ثانیه شروع بشه.
مثلاً اگه 0.5s باشه، نیم‌ثانیه بعد از رویداد (مثل hover) انیمیشن شروع می‌شه.

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

کلاس	مقدار CSS	توضیح
`delay-75`	`transition-delay: 75ms;`	تاخیر ۷۵ میلی‌ثانیه
`delay-100`	`transition-delay: 100ms;`	تاخیر ۰.۱ ثانیه
`delay-150`	`transition-delay: 150ms;`	تاخیر ۰.۱۵ ثانیه
`delay-200`	`transition-delay: 200ms;`	تاخیر ۰.۲ ثانیه
`delay-300`	`transition-delay: 300ms;`	تاخیر ۰.۳ ثانیه
`delay-500`	`transition-delay: 500ms;`	تاخیر نیم ثانیه
`delay-700`	`transition-delay: 700ms;`	تاخیر ۰.۷ ثانیه
`delay-1000`	`transition-delay: 1000ms;`	تاخیر ۱ ثانیه

📌 مثال


<div class="flex gap-6">
  <!-- بدون delay -->
  <div class="w-16 h-16 bg-blue-500 transition-transform duration-700 hover:translate-x-32"></div>

  <!-- با delay 500ms -->
  <div class="w-16 h-16 bg-green-500 transition-transform duration-700 delay-500 hover:translate-x-32"></div>

  <!-- با delay 1000ms -->
  <div class="w-16 h-16 bg-red-500 transition-transform duration-700 delay-1000 hover:translate-x-32"></div>
</div>

🔹 توی این مثال مربع سبز با نیم ثانیه تأخیر حرکت می‌کنه و قرمز با ۱ ثانیه.

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

مثل duration و timing-function می‌تونی delay سفارشی هم توی tailwind.config.js تعریف کنی:


module.exports = {
  theme: {
    extend: {
      transitionDelay: {
        '2000': '2000ms', // تاخیر ۲ ثانیه
      }
    }
  }
}

استفاده:


<div class="transition-all duration-700 delay-2000 hover:scale-125"></div>

🔥 حالا که همه چی رو پوشوندیم (Property, Duration, Timing, Delay)،