آموزش جامع: انیمیشن با keyframes در CSS

انیمیشن‌ها با استفاده از @keyframes یکی از قدرتمندترین ابزارهای CSS برای ایجاد حرکت‌ها و انتقال‌های پیچیده در رابط‌های وب هستند. در این مقاله به اصول، الگوها، نکات عملکردی و مثال‌های کاربردی می‌پردازیم تا بتوانید انیمیشن‌های روان، قابل دسترس و بهینه تولید کنید.

مقدمه‌ای بر @keyframes

قانون @keyframes مجموعه‌ای از مرحله‌ها (keyframes) را تعریف می‌کند که در طی مدت زمان تعیین‌شده، حالت‌های متفاوتِ یک عنصر را مشخص می‌کنند. هر keyframe می‌تواند با درصدها (0%–100%) یا با کلمات کلیدی from و to تعریف شود.

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.box {
  animation: slideIn 0.6s ease-out forwards;
}

توضیح: در این مثال یک انیمیشن به نام slideIn تعریف شده که عنصر را از سمت چپ وارد می‌کند و شفافیت را از صفر به یک تغییر می‌دهد. در کلاس .box از شورت‌هاندم animation استفاده شده: نام، مدت زمان، تابع زمانبندی و forwards برای حفظ حالت نهايي.

خواص اصلی animation

• animation-name: نام @keyframes
• animation-duration: مدت زمان اجرا (مثلاً 0.5s)
• animation-timing-function: تابع زمانی (ease, linear, cubic-bezier(…), steps(…))
• animation-delay: تأخیر قبل از شروع
• animation-iteration-count: تعداد تکرار یا infinite
• animation-direction: normal, reverse, alternate
• animation-fill-mode: none, forwards, backwards, both
• animation-play-state: running یا paused

مثال: انیمیشن چند مرحله‌ای با درصدها

@keyframes colorPulse {
  0% { background-color: #ff7a7a; transform: scale(1); }
  50% { background-color: #ffd27a; transform: scale(1.05); }
  100% { background-color: #7affc4; transform: scale(1); }
}

.badge {
  animation: colorPulse 2s ease-in-out infinite;
}

توضیح: این مثال یک پالس رنگی و مقیاس‌دهی ایجاد می‌کند که به صورت بی‌نهایت تکرار می‌شود. استفاده از transform برای تغییر مقیاس به جای تغییر ابعاد مستقیم، برای عملکرد بهتر توصیه می‌شود.

بهینه‌سازی عملکرد و نکات فنی

برای اجرای روان انیمیشن‌ها و جلوگیری از بار روی CPU، بهتر است:

• از transform و opacity استفاده کنید؛ چون اغلب توسط GPU شتاب‌دهی می‌شوند.
• از انیمیت کردن خصوصیات layout مثل width, height, left, top با احتیاط خودداری کنید.
• در صورت نیاز به شتاب‌دهی سخت‌افزاری از transform: translate3d(0,0,0) یا will-change استفاده کنید، اما با احتیاط تا حافظه را هدر ندهید.

مثال اصلاح‌شده: اجتناب از animating left

/* بد: تاثیر منفی روی layout */.menu {
  position: relative;
  left: -200px;
  animation: slideLeft 0.5s ease forwards;
}
@keyframes slideLeft {
  to { left: 0; }
}

/* خوب: استفاده از transform برای عملکرد بهتر */.menu {
  transform: translateX(-200px);
  animation: slideTranslate 0.5s ease forwards;
  will-change: transform;
}
@keyframes slideTranslate {
  to { transform: translateX(0); }
}

توضیح: در نمونه اول انیمیت خاصیت left موجب بازترسیم (reflow) می‌شود و عملکرد ضعیفی دارد. نمونه دوم با transform و will-change رفتار بهینه‌تری دارد و اغلب توسط GPU اجرا می‌شود.

دسترسی و قابلیت تنظیم برای کاربران

برای احترام به نیازهای کاربرانی که از تنظیمات دسترس‌پذیری استفاده می‌کنند، باید از رسانه‌کوئری prefers-reduced-motion استفاده کنید:

@media (prefers-reduced-motion: reduce) {
  .box, .badge, .menu {
    animation: none !important;
    transition: none !important;
  }
}

توضیح: این بلوک انیمیشن‌ها و ترنزیشن‌ها را در صورت فعال بودن ترجیح به کاهش حرکت در سیستم کاربر غیرفعال می‌کند و تجربه قابل دسترس‌تری ایجاد می‌نماید.

توابع زمانبندی پیشرفته

• cubic-bezier(): کنترل کامل منحنی سرعت؛ مثال: cubic-bezier(.2,.7,.1,1)
• steps(): مناسب برای انیمیشن‌های پله‌ای یا spriteها؛ مثال: steps(4, end)

@keyframes sprite {
  from { background-position: 0 0; }
  to { background-position: -320px 0; }
}
.sprite {
  animation: sprite 1s steps(4) infinite;
}

توضیح: نمونه بالا برای ایجاد انیمیشن از تصاویر sprite مناسب است؛ تابع steps باعث می‌شود تصویر به صورت فریم‌به‌فریم جابه‌جا شود.

ترکیب چند انیمیشن و توقف/ادامه

می‌توانید چند انیمیشن را با کاما جدا کنید یا از چند خاصیت animation-* استفاده کنید. همچنین با animation-play-state: paused انیمیشن را متوقف کنید و در جاوااسکریپت با تغییر این خاصیت، آن را ادامه دهید.

.card {
  animation: float 3s ease-in-out infinite, spin 6s linear infinite;
}

.card.paused {
  animation-play-state: paused;
}

توضیح: در این مثال عنصر همزمان یک انیمیشن شناوری ملایم و یک چرخش دارد. کلاس .paused می‌تواند با جاوااسکریپت روی عنصر اعمال شود تا هر دو انیمیشن متوقف شوند.

رویدادها و دیباگ

• رویدادهای جاوااسکریپت: animationstart, animationiteration, animationend
• در ابزارهای توسعه مرورگر می‌توانید زمانبندی، تأخیر و مراحل keyframe را مشاهده و ویرایش کنید.

جدول مقایسه کوتاه خواص

جمع‌بندی و نکات نهایی

انیمیشن با @keyframes ابزار انعطاف‌پذیری است که در صورت طراحی صحیح می‌تواند تجربه کاربری را بهبود دهد. از ترنسفورم و اپاسیتی برای عملکرد بهتر استفاده کنید، به دسترس‌پذیری توجه کنید و هنگام نیاز از will-change یا تکنیک‌های GPU بهره ببرید. همچنین تست روی دستگاه‌های موبایل و مرورگرهای مختلف را فراموش نکنید تا تجربه نهایی روان و بدون مشکل باشد.

اگر می‌خواهید نمونه‌های بیشتری یا کمک در بهینه‌سازی انیمیشن‌های خاص خود داشته باشید، می‌توانم بررسی و نمونه‌سازی کد انجام دهم.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال