Transition Property

ویژگی transition-property مشخص می‌کنه که کدوم خصوصیات CSS هنگام اعمال transition انیمیشن داشته باشن.

مثلاً:

transition-property: background-color, transform;

📑 کلاس‌های Tailwind برای Transition Property

Tailwind چندین کلاس آماده برای کنترل این ویژگی داره:

کلاسCSS متناظر
transition-nonetransition-property: none;
transition-alltransition-property: all;
transitiontransition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-colorstransition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-opacitytransition-property: opacity;
transition-shadowtransition-property: box-shadow;
transition-transformtransition-property: transform;

📌 مثال ساده

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

<!-- تغییر شفافیت با Transition -->
<div class="w-20 h-20 bg-red-500 transition-opacity duration-700 hover:opacity-30"></div>

<!-- تغییر Transform -->
<div class="w-20 h-20 bg-green-500 transition-transform duration-500 hover:scale-125"></div>

⚡ ترکیب با Duration و Ease

تو می‌تونی transition-property رو با کلاس‌های دیگه مثل:

  • duration-300 (مدت زمان)

  • ease-in-out (الگوی سرعت)

  • delay-200 (تاخیر)

ترکیب کنی.

مثال:

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