ساخت انیمیشن‌های حرفه‌ای با @keyframes (گام به گام)

CSS Animations: خلق انیمیشن‌های پیچیده با @keyframes! 🎬

سلام به همگی! تا الان با Transitionها آشنا شدیم که تغییرات بین دو حالت رو نرم می‌کنن. اما اگه بخوایم انیمیشن‌های پیچیده‌تر، چند مرحله‌ای، یا حتی انیمیشن‌هایی که مدام تکرار می‌شن رو بسازیم چی؟ اینجا پای CSS Animations و دستور جادویی @keyframes به میون میاد! با انیمیشن‌ها، می‌تونیم دقیقاً مشخص کنیم که هر مرحله از انیمیشن چی باشه و چطور اتفاق بیفته. بیاین ببینیم چطور می‌تونیم دنیا رو به حرکت در بیاریم! 🏃‍♀️

1. @keyframes: کارگردان انیمیشن ما! 🎥

دستور @keyframes به ما اجازه می‌ده که یه “کارت انیمیشن” تعریف کنیم. توی این کارت، مراحل مختلف انیمیشن رو مشخص می‌کنیم. هر مرحله، یه “فریم” نامیده می‌شه.

شکل کلیش اینطوریه:

@keyframes animation-name {
  /* فریم‌ها */
  from { /* حالت شروع */
    property: value;
  }
  to { /* حالت پایان */
    property: value;
  }
}

/* یا با درصد: */
@keyframes animation-name {
  0% { /* شروع */
    property: value;
  }
  25% { /* 25% راه رفته */
    property: value;
  }
  50% { /* وسط راه */
    property: value;
  }
  75% { /* 75% راه رفته */
    property: value;
  }
  100% { /* پایان */
    property: value;
  }
}

• @keyframes: کلمه‌ی کلیدی که شروع تعریف انیمیشن رو نشون می‌ده.
• animation-name: یه اسم دلخواه برای انیمیشن‌مون (مثلاً bounce، fadeIn).
• from / to یا 0% / 100%: انتهای و ابتدای انیمیشن رو مشخص می‌کنن.
• درصدها (25%، 50% و …): برای تعریف فریم‌های میانی و کنترل دقیق‌تر روی روند انیمیشن.

2. اعمال انیمیشن به یک عنصر: دستور `animation`! ✨

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

• animation-name: اسم انیمیشنی که با @keyframes تعریف کردیم.
• animation-duration: مدت زمان اجرای یک دور انیمیشن (مثل Transitionها).
• animation-timing-function: سرعت انیمیشن در طول زمان (مثل ease، linear و …).
• animation-delay: تاخیر قبل از شروع انیمیشن.
• animation-iteration-count: چند بار انیمیشن تکرار بشه؟ (مثلاً infinite برای تکرار بی‌نهایت).
• animation-direction: جهت اجرای انیمیشن (مثلاً alternate برای رفت و برگشت).
• animation-fill-mode: تعیین می‌کنه که عنصر قبل از شروع و بعد از پایان انیمیشن چه وضعیتی داشته باشه (مثلاً forwards که حالت نهایی رو نگه داره).
• animation-play-state: برای کنترل اجرای انیمیشن (running یا paused).

3. مثال عملی: یه دایره که می‌پره! 🏀

بیاید یه انیمیشن ساده بسازیم که یه دایره اول بالا بره و بعد به زمین بخوره.

/* تعریف انیمیشن با keyframes */
@keyframes bounce {
  0% {
    transform: translateY(0); /* در ابتدا در جای خود */
    animation-timing-function: ease-out; /* اولش کمی شتاب می گیره */
  }
  50% {
    transform: translateY(-100px); /* تا 100 پیکسل بالا می ره */
    animation-timing-function: ease-in; /* بعدش شتاب کم می کنه */
  }
  100% {
    transform: translateY(0); /* دوباره به جای اول بر می گرده */
    animation-timing-function: ease-out; /* موقع برگشت دوباره شتاب می گیره */
  }
}

/* استایل‌های اولیه برای دایره */
.circle {
  width: 80px;
  height: 80px;
  background-color: #ff7043; /* نارنجی */
  border-radius: 50%; /* دایره */
  margin: 50px auto; /* وسط صفحه */

  /* اعمال انیمیشن */
  animation-name: bounce; /* اسم انیمیشنمون */
  animation-duration: 1.5s; /* 1.5 ثانیه طول بکشه */
  animation-iteration-count: infinite; /* بی نهایت تکرار بشه */
  /* animation-fill-mode: forwards; */ /* اگه نمی‌خواستیم تکرار بشه */
}

/* با hover کردن، انیمیشن کمی سریع تر شه */
.circle:hover {
  animation-duration: 0.8s;
}

تو این مثال، ما با استفاده از transform: translateY و animation-timing-function های مختلف در هر فریم، یه حس واقعی از جهش رو ایجاد کردیم.

4. ترکیب `animation` shorthand: همه در یک خط! ✍️

مثل Transition، می‌تونیم همه این ویژگی‌ها رو در یک خط با animation shorthand بنویسیم. ترتیبش مهمه:
animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;

.my-element {
  /* name, duration, timing-function, delay, iteration-count, direction, fill-mode */
  animation: slideIn 1s ease-out 0.5s 1 forwards;
}

5. انیمیشن‌های سه بعدی با Keyframes! 🚀

موتور انیمیشن CSS قدرتمنده و می‌تونه همه تبدیل‌های 2D و 3D رو هم انیمیت کنه! کافیه توی @keyframes از توابع Transform سه‌بعدی استفاده کنید.

@keyframes flip3d {
  from {
    transform: perspective(800px) rotateY(0deg);
    background-color: lightcoral;
  }
  to {
    transform: perspective(800px) rotateY(180deg);
    background-color: lightblue;
  }
}

.card {
  width: 150px;
  height: 150px;
  background-color: lightcoral;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  margin: 50px auto;
  /* برای اینکه 3D رو ببینیم، باید perspective رو والد داشته باشه یا خود عنصر */
  transform-style: preserve-3d; /* برای فرزندان 3D */

  animation: flip3d 2s ease infinite alternate; /* رفت و برگشت بی نهایت */
}

با @keyframes می‌تونیم داستان‌های بصری جالبی تعریف کنیم، از افکت‌های ساده تا انیمیشن‌های پیچیده‌ای که کاربر رو جذب می‌کنه.

CSS Animations و @keyframes کلید ساختن تجربه‌های کاربری پویا و جذاب هستن. این ابزارها به شما اجازه می‌دن که فراتر از استایل‌های ثابت برید و به صفحات وب‌تون زندگی ببخشید. حتماً با @keyframes بازی کنید، ترکیب‌های مختلف رو امتحان کنید و خلاقیت‌تون رو به کار بگیرید! موفق باشید! ✨