آشنایی با CSS Transitions

مفهوم CSS Transitions یا همان انتقال‌ها در CSS، یکی از ویژگی‌های جذاب زبان طراحی CSS است که به ما این امکان را می‌دهد تا تغییرات در خاصیت‌های CSS عناصر را به صورت نرم و روان‌تر و نه ناگهانی انجام دهیم. استفاده از این قابلیت می‌تواند باعث زیباتر شدن طراحی‌های وبسایتمان و افزایش تعامل و جذب کاربر شود.

فرض کنید که می‌خواهید رنگ زمینه یک دکمه را به محض اینکه کاربر موس خود را روی آن قرار می‌دهد، تغییر دهید. با استفاده از CSS Transitions، این تغییر رنگ به جای اینکه بلافاصله صورت بگیرد، می‌تواند به نرمی و طی چند صدم ثانیه انجام شود. این تجربه کاربری بسیار بهتری ایجاد می‌کند.

برای شروع کار با CSS Transitions، ابتدا باید تعیین کنید که کدام خاصیت‌ها در زمان رخداد یک تغییر باید به صورت انیمیشنی نمایش داده شوند. به علاوه، باید مشخص کنید که این انتقال چه مدت زمانی طول بکشد و در نهایت، اگر نیاز بود سرعت تغییر را با استفاده از توابع زمانی تسهیل کنید.

بیایید نگاهی به نحوه تعریف CSS Transitions بیاندازیم. در قطعه کد زیر، یک مثال ساده از تغییر رنگ یک دکمه در زمان هاور شدن آن آورده شده است:

.button {
  background-color: blue;
  transition: background-color 0.5s ease;
}

.button:hover {
  background-color: green;
}

در مثال بالا، خاصیت transition به کلاس .button اعمال شده است. بیایید به صورت خط به خط توضیح دهیم:

• background-color: blue;
  رنگ زمینه دکمه در حالت ابتدایی به رنگ آبی تنظیم شده است.
• transition: background-color 0.5s ease;
  در هنگام تغییر خاصیت background-color، انتقال طی ۰.۵ ثانیه و با استفاده از تابع تسهیل ease انجام می‌شود.
• .button:hover
  این شبه کلاس به دکمه اعمال می‌شود وقتی که کاربر موس خود را روی دکمه قرار می‌دهد.
• background-color: green;
  وقتی که موس روی دکمه باشد، رنگ زمینه به سبز تغییر می‌کند.