CSS Animations

برخلاف Transitions که فقط برای تغییر تدریجی بین دو حالت استفاده می‌شن، Animations به شما اجازه می‌دن چندین مرحله حرکت و تغییر ایجاد کنید و اون‌ها رو بارها تکرار کنید.

🔹 سینتکس کلی

برای انیمیشن‌ها باید دوتا چیز تعریف کنیم:

  1. keyframes@ → مشخص می‌کنه در هر مرحله چه اتفاقی بیفته.

  2. پراپرتی‌های انیمیشن روی المنت → مشخص می‌کنن که اون keyframes چطور اجرا بشه.

🔹 تعریف Keyframes

@keyframes myAnimation {
  from { background: coral; }
  to { background: teal; }
}

یا چند مرحله:

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

🔹 پراپرتی‌های مهم انیمیشن

پراپرتیتوضیح
animation-nameنام keyframes
animation-durationمدت زمان اجرا
animation-timing-functionنوع سرعت (ease, linear, ease-in...)
animation-delayتأخیر شروع
animation-iteration-countتعداد تکرار (1, infinite, عدد دلخواه)
animation-directionجهت اجرا (normal, reverse, alternate)
animation-fill-modeحالت المنت قبل و بعد انیمیشن (none, forwards, backwards, both)
animation-play-stateتوقف یا ادامه انیمیشن (running, paused)

🔹 مثال ساده (انیمیشن رنگ)

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>CSS Animation</title>
  <style>
    .box {
      width: 150px;
      height: 150px;
      background: coral;
      animation: changeColor 3s infinite alternate;
    }

    @keyframes changeColor {
      from { background: coral; }
      to   { background: teal; }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

✅ جعبه به صورت بی‌نهایت رنگ عوض می‌کنه.

🔹 مثال پیشرفته (حرکت توپ)

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>Bouncing Ball</title>
  <style>
    .ball {
      width: 80px;
      height: 80px;
      background: crimson;
      border-radius: 50%;
      position: relative;
      animation: bounce 2s infinite ease-in-out;
    }

    @keyframes bounce {
      0%, 100% { top: 0; }
      50%      { top: 200px; }
    }
  </style>
</head>
<body>
  <div class="ball"></div>
</body>
</html>

✅ توپ مثل حالت پرش بالا و پایین می‌کنه.

🔹 مثال با چند مرحله

@keyframes moveBox {
  0%   { left: 0;   background: coral; }
  25%  { left: 100px; background: gold; }
  50%  { left: 200px; background: lime; }
  75%  { left: 100px; background: skyblue; }
  100% { left: 0;   background: coral; }
}

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

⚡️ تفاوت مهم با Transition:

  • Transition → فقط تغییر بین دو حالت (مثلاً عادی و hover)

  • Animation → امکان طراحی چند مرحله، تکرار، کنترل دقیق‌تر