آموزش انیمیشن‌های پیشرفته با keyframes در CSS: طراحی حرکات پویا و چند مرحله‌ای

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

انیمیشن با keyframes چیست؟

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

نحوه تعریف keyframes

برای تعریف انیمیشن با keyframes، ابتدا از @keyframes استفاده می‌کنیم و سپس مراحل و تغییرات را در داخل آن تعیین می‌کنیم.

@keyframes animationName {
  0% { /* استایل شروع انیمیشن */ }
  50% { /* استایل میانه انیمیشن */ }
  100% { /* استایل پایان انیمیشن */ }
}

نحوه اعمال انیمیشن با keyframes به عناصر

برای اعمال انیمیشن به عناصر، از ویژگی animation استفاده می‌کنیم. این ویژگی شامل چندین زیرخصوصیت مهم است که می‌توانند کنترل کاملی بر زمان‌بندی، نوع حرکت و دفعات تکرار انیمیشن داشته باشند:

• animation-name: نام انیمیشنی که در keyframes تعریف شده است.

• animation-duration: مدت زمان اجرای انیمیشن.

• animation-timing-function: نوع حرکت انیمیشن (مانند ease، linear، ease-in، ease-out).

• animation-delay: تأخیر در شروع انیمیشن.

• animation-iteration-count: تعداد دفعات تکرار انیمیشن (مقدار infinite برای تکرار بی‌نهایت).

• animation-direction: جهت انیمیشن (مانند normal، reverse، alternate).

مثال ساده از انیمیشن چند مرحله‌ای با keyframes

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

@keyframes slideAndChangeColor {
  0% {
    transform: translateX(0);
    background-color: blue;
  }
  50% {
    transform: translateX(100px);
    background-color: green;
  }
  100% {
    transform: translateX(200px);
    background-color: red;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slideAndChangeColor 4s ease-in-out infinite;
}

در اینجا:

• عنصر .box با نام انیمیشن slideAndChangeColor در طول 4 ثانیه و به صورت بی‌نهایت حرکت می‌کند.

• transform و background-color در مراحل 0%، 50% و 100% تغییر می‌کنند.

کنترل زمان‌بندی و تکرار انیمیشن با animation-iteration-count و animation-direction

می‌توانید تعداد دفعات تکرار و جهت اجرای انیمیشن را با استفاده از animation-iteration-count و animation-direction کنترل کنید.

مثال از تکرار و تغییر جهت انیمیشن

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

.bounce-box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation: bounce 1s ease infinite alternate;
}

در اینجا:

• عنصر .bounce-box با نام انیمیشن bounce به طور نامحدود و با جهت alternate حرکت می‌کند، یعنی از بالا به پایین و برعکس تکرار می‌شود.

ایجاد انیمیشن‌های پیچیده با keyframes

می‌توانید با افزودن مراحل بیشتر به keyframes، انیمیشن‌های پیچیده‌تری ایجاد کنید. در مثال زیر، با ایجاد تغییرات چند مرحله‌ای، یک انیمیشن گردشی با تغییر رنگ ایجاد کرده‌ایم.

@keyframes rotateAndColorChange {
  0% {
    transform: rotate(0deg);
    background-color: red;
  }
  25% {
    transform: rotate(90deg);
    background-color: yellow;
  }
  50% {
    transform: rotate(180deg);
    background-color: green;
  }
  75% {
    transform: rotate(270deg);
    background-color: blue;
  }
  100% {
    transform: rotate(360deg);
    background-color: red;
  }
}

.square {
  width: 100px;
  height: 100px;
  animation: rotateAndColorChange 4s linear infinite;
}

در اینجا:

• عنصر .square در طول 4 ثانیه 360 درجه می‌چرخد و رنگ آن در مراحل مختلف تغییر می‌کند.

ایجاد انیمیشن‌های هماهنگ و چند عنصری با استفاده از delay

با استفاده از animation-delay می‌توانید انیمیشن‌ها را به صورت هماهنگ و با تاخیرهای مختلف بر روی چندین عنصر اعمال کنید.

مثال انیمیشن هماهنگ روی چندین دایره

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #3498db;
  animation: fadeInOut 2s ease-in-out infinite;
}

.circle:nth-child(1) {
  animation-delay: 0s;
}

.circle:nth-child(2) {
  animation-delay: 0.5s;
}

.circle:nth-child(3) {
  animation-delay: 1s;
}

در اینجا:

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

استفاده از Timing Functions برای کنترل حرکت انیمیشن

با استفاده از animation-timing-function می‌توانید نوع حرکت انیمیشن را تعیین کنید. Timing Functionهایی مانند ease، linear، ease-in، ease-out و ease-in-out تغییرات سرعت انیمیشن را کنترل می‌کنند.

مثال استفاده از timing-function های مختلف

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

.slide-box-ease {
  animation: slide 2s ease;
}

.slide-box-linear {
  animation: slide 2s linear;
}

.slide-box-ease-in-out {
  animation: slide 2s ease-in-out;
}

در اینجا:

• هر عنصر با نوع حرکت متفاوتی انیمیشن می‌شود و می‌توان تفاوت حرکت‌ها را مشاهده کرد.

افکت‌های چند مرحله‌ای پیچیده با استفاده از keyframes

در این مثال یک انیمیشن پیچیده ایجاد می‌کنیم که شامل ترکیبی از چرخش، تغییر اندازه، و تغییر رنگ است.

@keyframes complexAnimation {
  0% {
    transform: scale(1) rotate(0deg);
    background-color: #3498db;
  }
  25% {
    transform: scale(1.2) rotate(45deg);
    background-color: #e74c3c;
  }
  50% {
    transform: scale(0.8) rotate(90deg);
    background-color: #2ecc71;
  }
  75% {
    transform: scale(1.5) rotate(135deg);
    background-color: #9b59b6;
  }
  100% {
    transform: scale(1) rotate(180deg);
    background-color: #3498db;
  }
}

.complex-box {
  width: 100px;
  height: 100px;
  animation: complexAnimation 5s infinite ease-in-out;
}

در اینجا:

عنصر .complex-box در طی انیمیشن ترکیبی از چرخش، تغییر اندازه، و تغییر رنگ را تجربه می‌کند و این افکت در طول 5 ثانیه تکرار می‌شود.

نکات و بهترین شیوه‌ها برای استفاده از انیمیشن‌های CSS

• انیمیشن‌ها را بهینه کنید: از انیمیشن‌های پیچیده و طولانی به صورت افراطی استفاده نکنید، زیرا ممکن است عملکرد صفحه را کاهش دهد.

• هماهنگی و سازگاری با طراحی کلی: انیمیشن‌ها باید با طراحی و تجربه کاربری وب‌سایت همخوانی داشته باشند و نباید کاربر را سردرگم کنند.

• تست در دستگاه‌های مختلف: انیمیشن‌ها را در دستگاه‌ها و مرورگرهای مختلف تست کنید تا از نمایش درست آن‌ها مطمئن شوید.

نتیجه‌گیری

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