ویژگی transition در CSS یکی از مهم‌ترین ابزارها برای ایجاد تغییرات نرم و تدریجی در عناصر وب است. این ویژگی باعث می‌شود که تغییرات ویژگی‌های CSS به‌جای اینکه ناگهانی اعمال شوند، با یک انیمیشن نرم انجام شوند.

در این مقاله، نحوه استفاده از transition، مقدارهای مختلف آن و مثال‌های کاربردی بررسی می‌شود.

۱. ویژگی transition در CSS چیست؟

ویژگی transition امکان کنترل مدت زمان، نوع حرکت و زمان‌بندی تغییرات در ویژگی‌های CSS را فراهم می‌کند.

مثال ساده: تغییر رنگ پس‌زمینه هنگام هاور (Hover)

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: background-color 0.5s ease;
}

.box:hover {
    background-color: red;
}

✅ در این مثال، هنگام هاور کردن روی .box، رنگ پس‌زمینه به‌صورت تدریجی و در مدت ۰.۵ ثانیه از آبی به قرمز تغییر می‌کند.

۲. نحوه تعریف transition در CSS

۱. استفاده از transition با مقدارهای جداگانه

transition: property duration timing-function delay;

✅ این ویژگی‌ها شامل:

• property → مشخص می‌کند که کدام ویژگی CSS تغییر کند (مثلاً background-color، width، opacity).
• duration → مدت زمان اجرای تغییر (مثلاً 0.5s یا 1s).
• timing-function → نحوه حرکت تغییر (مثلاً ease, linear, ease-in).
• delay (اختیاری) → تاخیر قبل از شروع تغییر (مثلاً 0.2s).

۲. استفاده از transition برای چند ویژگی همزمان

.box {
    transition: background-color 0.5s ease, width 0.5s ease-in;
}

✅ در این مثال، رنگ پس‌زمینه و عرض عنصر هر دو به‌صورت تدریجی تغییر خواهند کرد.

۳. مقدارهای timing-function در transition

timing-function نحوه حرکت تغییرات را مشخص می‌کند. مقدارهای اصلی آن:

مثال: استفاده از انواع timing-function

.box {
    transition: width 1s linear;
}

.box:hover {
    width: 200px;
}

✅ در این مثال، تغییر width به‌صورت خطی و بدون شتاب انجام می‌شود.

۴. تاخیر در transition با delay

برای اجرای تغییرات با تأخیر، می‌توان از delay استفاده کرد.

مثال: تغییر اندازه با تأخیر ۱ ثانیه‌ای

.box {
    width: 100px;
    height: 100px;
    background-color: green;
    transition: width 1s ease-in 1s;
}

.box:hover {
    width: 200px;
}

✅ در این مثال، ۱ ثانیه پس از هاور شدن، تغییر اندازه اجرا می‌شود.

۵. استفاده از transition در چند ویژگی همزمان

مثال: تغییر همزمان اندازه، رنگ و شفافیت

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    opacity: 1;
    transition: width 0.5s ease, background-color 0.5s ease, opacity 0.5s ease;
}

.box:hover {
    width: 200px;
    background-color: red;
    opacity: 0.5;
}

✅ در این مثال، هنگام هاور شدن:

• اندازه عنصر بزرگ‌تر می‌شود.
• رنگ پس‌زمینه از آبی به قرمز تغییر می‌کند.
• میزان شفافیت (opacity) کاهش می‌یابد.

۶. ایجاد افکت‌های جذاب با transition

۱. تغییر ارتفاع هنگام هاور

.box {
    width: 150px;
    height: 50px;
    background: orange;
    transition: height 0.4s ease-out;
}

.box:hover {
    height: 100px;
}

✅ در این مثال، هنگام هاور، ارتفاع عنصر به‌صورت نرم و روان افزایش می‌یابد.

۲. تغییر موقعیت عنصر با transition

.box {
    position: relative;
    left: 0;
    transition: left 0.5s ease-in-out;
}

.box:hover {
    left: 50px;
}

✅ هنگام هاور، عنصر به‌صورت نرم و تدریجی ۵۰ پیکسل به راست حرکت می‌کند.

۳. دکمه با افکت transition حرفه‌ای

.button {
    padding: 10px 20px;
    background: blue;
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.button:hover {
    background: red;
    transform: scale(1.1);
}

✅ هنگام هاور، دکمه بزرگ‌تر می‌شود و رنگ آن تغییر می‌کند.

۷. ترکیب transition با transform برای افکت‌های حرکتی

می‌توان transition را با transform ترکیب کرد تا افکت‌های جذاب‌تری ایجاد شود.

مثال: چرخش هنگام هاور

.box {
    width: 100px;
    height: 100px;
    background: purple;
    transition: transform 0.5s ease;
}

.box:hover {
    transform: rotate(45deg);
}

✅ در این مثال، هنگام هاور، عنصر ۴۵ درجه می‌چرخد.

۸. استفاده از transition در متن و افکت تایپ

مثال: تغییر اندازه متن هنگام هاور

.text {
    font-size: 16px;
    transition: font-size 0.3s ease-in-out;
}

.text:hover {
    font-size: 24px;
}

✅ هنگام هاور، اندازه متن به‌صورت تدریجی افزایش می‌یابد.

۹. جمع‌بندی

✔ transition امکان ایجاد تغییرات نرم و تدریجی در عناصر را فراهم می‌کند.
✔ می‌توان transition را روی ویژگی‌های مختلف مانند رنگ، اندازه، موقعیت، شفافیت و چرخش اعمال کرد.
✔ مقدار timing-function مشخص می‌کند که تغییرات چگونه رخ دهند (ease, linear, ease-in و غیره).
✔ delay می‌تواند اجرای تغییر را به تأخیر بیندازد.
✔ می‌توان چندین transition را همزمان روی یک عنصر اعمال کرد.
✔ ترکیب transition با transform امکان ایجاد افکت‌های حرکتی جذاب را فراهم می‌کند.

با یادگیری این مفاهیم، می‌توانید افکت‌های حرفه‌ای و جذاب در طراحی وب‌سایت خود ایجاد کنید! 🚀