CSS Transitions: ایجاد انیمیشن‌های نرم و روان در وب‌سایت شما

برای تعریف یک Transition در CSS، شما از چندین ویژگی کلیدی استفاده می کنید که هر کدام بخشی از فرآیند انیمیشن را کنترل می کنند:

 

1. transition-property:

   • کاربرد: مشخص می کند که کدام ویژگی (یا ویژگی های) CSS باید انیمیشنی شوند. شما می توانید یک ویژگی خاص (مانند color, background-color, transform) یا all (برای انیمیشن شدن تمام ویژگی های قابل تغییر) را مشخص کنید.
   • مثال:

     .my-element {
       transition-property: background-color, transform; /* فقط رنگ پس زمینه و تبدیل تغییر می کنند */
     }
     

     یا

     .my-element {
       transition-property: all; /* تمام ویژگی های قابل تغییر انیمیشن می شوند */
     }
     

2. transition-duration:

   • کاربرد: مدت زمانی را که طول می کشد تا Transition کامل شود، تعیین می کند. این مقدار معمولاً به صورت ثانیه (s) یا میلی ثانیه (ms) بیان می شود.
   • مثال:

     .my-element {
       transition-duration: 0.5s; /* انیمیشن 0.5 ثانیه طول می کشد */
     }
     

     یا

     .my-element {
       transition-duration: 300ms; /* انیمیشن 300 میلی ثانیه طول می کشد */
     }
     

3. transition-timing-function:

   • کاربرد: سرعت انیمیشن را در طول مدت زمان آن تعیین می کند. این ویژگی مشخص می کند که انیمیشن چگونه شتاب می گیرد و کند می شود. مقادیر رایج عبارتند از:
     • ease (پیش فرض): شروع کند، سپس سریع، و در انتها دوباره کند می شود.
     • linear: سرعت ثابت در طول انیمیشن.
     • ease-in: شروع کند و سپس سریع می شود.
     • ease-out: شروع سریع و سپس کند می شود.
     • ease-in-out: شروع و پایان کند، و در وسط سریع می شود.
     • cubic-bezier(n,n,n,n): برای تعریف منحنی شتاب سفارشی.
   • مثال:

     .my-element {
       transition-timing-function: ease-in-out; /* انیمیشن با شتاب یکنواخت شروع و پایان می یابد */
     }
     

4. transition-delay:

   • کاربرد: مدت زمانی را قبل از شروع Transition تعیین می کند. این مقدار نیز به صورت s یا ms بیان می شود.
   • مثال:

     .my-element {
       transition-delay: 1s; /* انیمیشن 1 ثانیه بعد از تغییر حالت شروع می شود */
     }
     

ویژگی کوتاه شده transition:

شما می توانید تمام این ویژگی ها را در یک ویژگی واحد به نام transition ترکیب کنید تا کدنویسی شما کوتاه تر و خواناتر شود. ترتیب مقادیر مهم است: property duration timing-function delay.

• مثال:

  .my-element {
    /* property duration timing-function delay */
    transition: background-color 0.5s ease-in-out 0.2s;
  }
  

  اگر فقط duration را مشخص کنید، property به صورت all و timing-function به صورت ease در نظر گرفته می شود.

این اجزا به شما کنترل کاملی بر نحوه و زمان وقوع انیمیشن ها می دهند.

CSS Transitions زمانی فعال می شوند که یک ویژگی CSS که تحت تأثیر Transition قرار گرفته، تغییر کند. این تغییر معمولاً در پاسخ به یک رویداد یا تغییر حالت اتفاق می افتد. در اینجا چند روش رایج برای فعال سازی Transitions آورده شده است:

 

1. استفاده از شبه کلاس ها (Pseudo-classes):

   • رایج ترین روش، استفاده از شبه کلاس هایی مانند :hover (هنگامی که ماوس روی عنصر قرار می گیرد) یا :focus (هنگامی که عنصر فوکوس می گیرد) است.
   • مثال: تغییر رنگ دکمه هنگام هاور

     <button class="my-button">کلیک کنید</button>
     

     .my-button {
       background-color: blue;
       color: white;
       padding: 10px 20px;
       border: none;
       cursor: pointer;
       /* تعریف Transition */
       transition: background-color 0.3s ease; /* انیمیشن رنگ پس زمینه در 0.3 ثانیه با ease */
     }
     
     .my-button:hover {
       background-color: darkblue; /* حالت نهایی: رنگ پس زمینه تیره تر */
     }
     

     هنگامی که ماوس روی دکمه قرار می گیرد، background-color از blue به darkblue در طول 0.3 ثانیه با تابع ease تغییر می کند. وقتی ماوس برداشته می شود، انیمیشن به صورت معکوس اجرا شده و به حالت اولیه بازمی گردد.

2. تغییر کلاس با جاوا اسکریپت:

   • می توانید با استفاده از جاوا اسکریپت، یک کلاس CSS را به عنصری اضافه یا حذف کنید. اگر آن کلاس شامل ویژگی های Transition باشد، انیمیشن به طور خودکار فعال می شود.
   • مثال: باز و بسته کردن یک پنل

     <div class="panel">
       <button class="toggle-button">نمایش/پنهان</button>
       <div class="panel-content">
         این محتوای پنل است که با انیمیشن نمایش داده یا پنهان می شود.
       </div>
     </div>
     

     .panel-content {
       max-height: 0; /* ارتفاع اولیه صفر (پنهان) */
       overflow: hidden; /* محتوای خارج از محدوده مخفی می شود */
       opacity: 0; /* شفافیت اولیه صفر */
       transition: max-height 0.4s ease, opacity 0.4s ease; /* Transition برای ارتفاع و شفافیت */
     }
     
     .panel-content.is-open { /* کلاسی که با JS اضافه می شود */
       max-height: 200px; /* ارتفاع نهایی (یا مقداری که بتواند محتوا را نمایش دهد) */
       opacity: 1; /* شفافیت نهایی یک */
     }
     
     .toggle-button {
       cursor: pointer;
     }
     

     const button = document.querySelector('.toggle-button');
     const content = document.querySelector('.panel-content');
     
     button.addEventListener('click', () => {
       content.classList.toggle('is-open'); // اضافه یا حذف کلاس is-open
     });
     

     وقتی روی دکمه کلیک می شود، کلاس is-open اضافه یا حذف می شود. این تغییر در max-height و opacity باعث فعال شدن Transition و ایجاد انیمیشن باز و بسته شدن پنل می شود.

3. تغییر مستقیم ویژگی های CSS با جاوا اسکریپت:

   • اگرچه کمتر توصیه می شود، اما می توانید مستقیماً ویژگی های استایل یک عنصر را با جاوا اسکریپت تغییر دهید. اگر آن ویژگی ها در CSS تعریف شده باشند که Transition داشته باشند، انیمیشن اتفاق می افتد.
   • مثال:

     const myDiv = document.getElementById('myDiv');
     myDiv.style.transition = 'background-color 0.5s ease'; // تعریف transition با JS
     myDiv.style.backgroundColor = 'red'; // تغییر حالت و فعال شدن transition
     

     نکته: بهتر است Transition ها را در فایل CSS تعریف کنید تا جداسازی کد حفظ شود.

4. استفاده در کنار View Transitions API:

   • همانطور که در بحث قبلی دیدیم، view-transition-name به مرورگر اجازه می دهد تا Transition های پیچیده تری را بین نماهای مختلف DOM ایجاد کند. حتی در این حالت، شما می توانید از ویژگی های transition-* CSS برای سفارشی سازی نحوه انیمیشن عناصر استفاده کنید.

کلید فعال سازی Transitions، تغییر یک ویژگی CSS است که قبلاً یک Transition برای آن تعریف شده است.

CSS Transitions را می توان در طیف وسیعی از سناریوها برای بهبود رابط کاربری و تجربه کاربری استفاده کرد. در اینجا چند نمونه از کاربردهای رایج آورده شده است:

 

1. دکمه ها و لینک ها:

   • تغییر رنگ پس زمینه، رنگ متن، یا اضافه کردن سایه هنگام هاور یا فوکوس برای ایجاد بازخورد بصری.
   • بزرگنمایی (scale) یا جابجایی (translate) جزئی دکمه ها هنگام کلیک.

2. کارت های محصول یا محتوا:

   • ایجاد افکت های هاور مانند بلند شدن کارت (با استفاده از box-shadow و transform: translateY())، تغییر شفافیت یا نمایش دکمه های اضافی.
   • انیمیشن نرم هنگام تغییر حالت (مثلاً باز شدن جزئیات).

3. منوها و ناوبری:

   • باز و بسته شدن انیمیشنی منوهای کشویی (dropdown menus) یا منوهای همبرگری.
   • انیمیشن خط زیر لینک های ناوبری هنگام هاور.
   • تغییر رنگ یا اندازه آیکون ها در نوار ناوبری.

4. فرم ها و فیلدهای ورودی:

   • تغییر رنگ حاشیه فیلد ورودی هنگام فوکوس یا در صورت خطا.
   • انیمیشن برچسب ها (labels) که هنگام فوکوس به بالای فیلد منتقل می شوند.

5. مدال ها و پاپ آپ ها:

   • نمایش و پنهان شدن انیمیشنی پنجره های مدال (با تغییر opacity و transform).
   • انیمیشن پس زمینه تاریک شونده (overlay) هنگام باز شدن مدال.

6. اسلایدرها و گالری ها:

   • انتقال نرم بین اسلایدها (اگرچه برای این کار CSS Animations یا جاوا اسکریپت تخصصی تر معمولاً استفاده می شود، اما Transitions هم می توانند برای افکت های ساده تر به کار روند).
   • تغییر اندازه یا شفافیت تصاویر کوچک در گالری ها.

7. تغییرات ظاهری:

   • تغییر تم وب سایت (مثلاً از حالت روشن به تاریک) با انیمیشن نرم رنگ ها و پس زمینه ها.
   • انیمیشن تغییر اندازه عناصر برای سازگاری با صفحه های مختلف (Responsive Design).

8. بازخورد بصری:

   • هر جا که تغییری در وضعیت یک عنصر رخ می دهد (مثلاً فعال شدن یک قابلیت، دریافت پیام)، می توان از Transition برای ارائه یک بازخورد بصری واضح و دلنشین استفاده کرد.

نکته مهم: Transitions برای تغییرات بین دو حالت (شروع و پایان) عالی هستند. برای انیمیشن های پیچیده تر که نیاز به چندین فریم کلیدی، کنترل دقیق تر بر زمان بندی، یا انیمیشن های تکراری دارند، CSS Animations گزینه بهتری هستند.

برای استفاده مؤثر و بهینه از CSS Transitions، به نکات و بهترین شیوه های زیر توجه کنید:

 

1. تعریف Transition در حالت پایه:

   • بهترین کار این است که ویژگی transition را در حالت پایه (normal state) عنصر تعریف کنید، نه فقط در شبه کلاس هایی مانند :hover. این تضمین می کند که انیمیشن هم هنگام ورود به حالت جدید (مثلاً هاور) و هم هنگام بازگشت به حالت اولیه، به درستی اجرا شود.
   • مثال:

     .my-button {
       background-color: blue;
       transition: background-color 0.3s ease; /* در حالت پایه تعریف شده */
     }
     .my-button:hover {
       background-color: darkblue; /* حالت نهایی */
     }
     

2. استفاده از transform برای انیمیشن های پیچیده:

   • برای جابجایی (translate)، تغییر اندازه (scale)، چرخش (rotate) یا کج کردن (skew) عناصر، استفاده از ویژگی transform همراه با transition بسیار کارآمدتر است. مرورگرها این نوع انیمیشن ها را بهینه تر پردازش می کنند و معمولاً روان تر اجرا می شوند.
   • مثال:

     .card {
       transition: transform 0.3s ease, box-shadow 0.3s ease;
     }
     .card:hover {
       transform: translateY(-5px); /* جابجایی به سمت بالا */
       box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* اضافه کردن سایه */
     }
     

3. پرهیز از انیمیشن ویژگی های زیاد:

   • انیمیشن کردن تعداد زیادی از ویژگی ها به طور همزمان می تواند بار پردازشی را افزایش داده و باعث کندی شود. فقط ویژگی هایی را که واقعاً نیاز به انیمیشن دارند، مشخص کنید.

4. کنترل transition-duration:

   • مدت زمان انیمیشن را متناسب با نوع تعامل انتخاب کنید. انیمیشن های خیلی کوتاه ممکن است ناگهانی به نظر برسند و انیمیشن های خیلی طولانی ممکن است باعث تاخیر در پاسخگویی شوند. معمولاً مدت زمانی بین 0.2 تا 0.5 ثانیه مناسب است.

5. انتخاب transition-timing-function مناسب:

   • ease و ease-in-out برای اکثر موارد مناسب هستند زیرا طبیعی به نظر می رسند. از linear برای مواردی که نیاز به سرعت ثابت دارید (مانند شمارنده ها) استفاده کنید. cubic-bezier برای کنترل دقیق تر منحنی شتاب.

6. استفاده از transition-delay با احتیاط:

   • transition-delay می تواند برای ایجاد افکت های خاص مفید باشد، اما استفاده بیش از حد از آن ممکن است باعث گیج شدن کاربر شود. برای مثال، در لیست های آیتم هایی که به صورت متوالی ظاهر می شوند، می توان از delay استفاده کرد.

7. سازگاری با prefers-reduced-motion:

   • برای کاربران یا دستگاه هایی که ترجیح می دهند انیمیشن ها را محدود کنند، از Media Query prefers-reduced-motion استفاده کنید تا انیمیشن ها را غیرفعال یا ساده تر کنید.
   • مثال:

     @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after {
         animation-duration: 0.01ms !important; /* کاهش زمان انیمیشن */
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important; /* کاهش زمان transition */
         scroll-behavior: auto !important; /* غیرفعال کردن اسکرول نرم */
       }
     }
     

8. تست بر روی دستگاه های مختلف:

   • انیمیشن ها ممکن است در دستگاه های با قدرت پردازش متفاوت، عملکرد متفاوتی داشته باشند. حتماً Transitions خود را بر روی دستگاه های مختلف تست کنید.

با رعایت این نکات، می توانید از CSS Transitions برای ایجاد رابط های کاربری تعاملی، جذاب و کاربرپسند استفاده کنید.

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

 

با درک صحیح اجزای کلیدی مانند transition-property, transition-duration, transition-timing-function, و transition-delay (و همچنین فرم کوتاه شده transition)، می توانید انیمیشن های دقیقی را مطابق با نیازهای طراحی خود ایجاد کنید. فعال سازی این انیمیشن ها اغلب با استفاده از شبه کلاس ها (:hover, :focus) یا تغییر کلاس ها با جاوا اسکریپت انجام می شود.

از بازخورد بصری ساده برای دکمه ها گرفته تا انیمیشن های پیچیده تر برای منوها و کارت ها، CSS Transitions کاربردهای فراوانی دارند. با پیروی از بهترین شیوه ها، مانند تعریف Transition در حالت پایه، استفاده از transform برای انیمیشن های کارآمد، و در نظر گرفتن دسترسی پذیری با prefers-reduced-motion، می توانید اطمینان حاصل کنید که انیمیشن های شما هم زیبا و هم کاربردی هستند.

CSS Transitions یک راه عالی برای شروع کار با انیمیشن در وب هستند و به شما کمک می کنند تا رابط های کاربری خود را زنده تر و جذاب تر کنید.