آموزش کامل کار با ویژگی Transition در CSS3

مقدمه

ویژگی Transition در CSS3 به شما امکان می‌دهد تغییرات عناصر را به صورت نرم و تدریجی اعمال کنید. این قابلیت برای افکت‌های hover، تغییر رنگ، اندازه و سایر تغییرات استایل بسیار مفید است. برای یادگیری کامل CSS3 و استفاده حرفه‌ای از Transitions، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی Transition

Transition شامل مشخص کردن ویژگی، مدت زمان، تابع زمان‌بندی و تأخیر است تا تغییرات به صورت روان اعمال شوند.

ویژگی مورد نظر با transition-property
مدت زمان تغییر با transition-duration
تابع زمان‌بندی با transition-timing-function (linear, ease-in, ease-out, ease-in-out)
تأخیر شروع تغییر با transition-delay
می‌توان همه ویژگی‌ها را با transition: all 0.3s ease-in-out; کوتاه نوشت

مثال عملی با کد

تغییر رنگ دکمه هنگام hover:

.btn {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #2ecc71;
}

تغییر اندازه و چرخش عنصر:

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: transform 0.5s ease-in-out;
}

.box:hover {
  transform: scale(1.2) rotate(15deg);
}

اعمال transition روی چند ویژگی:

.card {
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.card:hover {
  background-color: #f39c12;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}