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

Transition Duration

ویژگی transition-duration مشخص می‌کنه انیمیشن چقدر طول بکشه (بر حسب میلی‌ثانیه یا ثانیه).

مثلاً:


transition-duration: 500ms;

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

Tailwind چندین مقدار پیش‌فرض داره:

کلاس	CSS متناظر
`duration-75`	`transition-duration: 75ms;`
`duration-100`	`transition-duration: 100ms;`
`duration-150`	`transition-duration: 150ms;`
`duration-200`	`transition-duration: 200ms;`
`duration-300`	`transition-duration: 300ms;`
`duration-500`	`transition-duration: 500ms;`
`duration-700`	`transition-duration: 700ms;`
`duration-1000`	`transition-duration: 1000ms;`

🔧 همچنین می‌تونی در فایل tailwind.config.js مقدار دلخواه اضافه کنی.

📌 مثال ساده


<!-- دکمه با تغییر رنگ سریع -->
<button class="bg-blue-500 text-white px-6 py-2 rounded transition-colors duration-200 hover:bg-blue-700">
  سریع
</button>

<!-- دکمه با تغییر رنگ کند -->
<button class="bg-green-500 text-white px-6 py-2 rounded transition-colors duration-700 hover:bg-green-700">
  کند
</button>

⚡ ترکیب با Property و Ease


<div class="w-20 h-20 bg-purple-500 transition-transform duration-1000 ease-in-out hover:rotate-180"></div>

اینجا چرخش (transform) در طول 1000ms انجام میشه.