انیمیشن‌ها در CSS: یک راهنمای جامع

انیمیشن‌ها در CSS یکی از جذاب‌ترین ویژگی‌هایی هستند که به طراحان وب اجازه می‌دهند تا وب‌سایت‌های پویا و جذاب‌تری ایجاد کنند. حتی اگر شما تازه وارد دنیای طراحی وب شده‌اید، درک مفاهیم پایه‌ای انیمیشن‌ها می‌تواند به شما کمک کند تا بهبود بزرگی در تجربه کاربری که ارائه می‌دهید، ایجاد کنید.

تنظیمات اولیه‌ی انیمیشن در CSS شامل مشخص کردن ویژگی‌هایی مانند زمان‌بندی، مدت زمان و حالت حرکت (از جمله ease، linear، و غیره) می‌شود. این ویژگی‌ها به شما اجازه می‌دهند که کنترل کاملی بر روی نحوه و سرعت اجرای انیمیشن‌ها در وب‌سایتتان داشته باشید.

در اینجاست که مفهوم «timeline» به میان می‌آید. با استفاده از ویژگی‌هایی مانند animation-delay و animation-duration می‌توانید دقیقاً تعریف کنید که انیمیشن‌ها در چه زمانی شروع و پایان یابند.

در زیر، یک مثال ساده از نحوه‌ی کاربرد کد انیمیشن در CSS آورده شده است. این کد یک بلوک را از چپ به راست صفحه حرکت می‌دهد.

  <style>
    @keyframes moveRight {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(100px);
      }
    }

    .animate-box {
      width: 100px;
      height: 100px;
      background-color: blue;
      animation-name: moveRight;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
  </style>
  
  <div class="animate-box"></div>
  

توضیحات خط به خط کد:

@keyframes moveRight
یک انیمیشن با نام moveRight تعریف کرده‌ایم که تعیین می‌کند بلوک چطور حرکت کند.

from و to
حالت‌های ابتدایی و انتهایی انیمیشن را مشخص می‌کنند. اینجا از ۰ به ۱۰۰ پیکسل در ناحیه X حرکت می‌کند.

.animate-box
کلاس سی‌اس‌اس مورد نظر که انیمیشن بر روی آن اعمال می‌شود.

animation-duration
مدت زمان اجرای کامل انیمیشن، که اینجا ۲ ثانیه تنظیم شده.

animation-timing-function
تعیین نوع حرکت انیمیشن، که اینجا از نوع ease-in-out است.

animation-iteration-count
تعداد دفعاتی که انیمیشن تکرار خواهد شد. اینجا، مقدار “بی‌نهایت” است تا انیمیشن مداوم اجرا شود.