آموزش CSS | انیمیشن (Animations)

معرفی انیمیشن و نحوه استفاده از آن

انیمیشن در CSS به شما امکان می‌دهد تا بدون استفاده از JavaScript، تغییرات تدریجی در استایل عناصر ایجاد کنید. برای مثال، می‌توانید اندازه، رنگ، موقعیت یا شفافیت یک عنصر را از حالتی به حالت دیگر تغییر دهید و این تغییر در یک بازه زمانی مشخص رخ دهد.

مراحل ساده برای شروع کار با انیمیشن:

1. تعریف انیمیشن با @keyframes
   ابتدا باید یک نام برای انیمیشن خود انتخاب کنید و مراحل تغییر را درون @keyframes تعریف کنید. این مراحل با درصد (از ۰٪ تا ۱۰۰٪) مشخص می‌شوند:

   @keyframes مثال_انیمیشن {
    from { opacity: 0; }   /* شروع: کاملاً شفاف */
    to   { opacity: 1; }   /* پایان: کاملاً غیرشفاف */
   }

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

   @keyframes رنگ_متغیر {
    0%   { background-color: red; }
    50%  { background-color: yellow; }
    100% { background-color: blue; }
   }

2. اعمال انیمیشن به یک عنصر
   پس از تعریف انیمیشن، از ویژگی‌های زیر روی عنصر مورد نظر استفاده می‌کنید (حداقل دو ویژگی animation-name و animation-duration ضروری هستند):

   div {
    animation-name: مثال_انیمیشن;   /* نامی که در keyframes تعریف کردید */
    animation-duration: 4s;        /* مدت زمان اجرای کامل انیمیشن */
   }

ویژگی‌های کلیدی انیمیشن (اختیاری):

• animation-delay: تاخیر در شروع انیمیشن (مثلاً 2s).
• animation-iteration-count: تعداد تکرار (1 یا infinite برای بی‌نهایت).
• animation-direction: جهت اجرا (normal، reverse، alternate).
• animation-fill-mode: وضعیت عنصر قبل/بعد از انیمیشن (none، forwards، backwards).

یک مثال کامل و ساده:

HTML:

<div class="جعبه">سلام!</div>

CSS:

.جعبه {
  width: 100px;
  height: 100px;
  background-color: green;
  animation-name: حرکت;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes حرکت {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(200px); background-color: orange; }
  100% { transform: translateX(0); background-color: green; }
}

در این مثال، <div> به مدت ۳ ثانیه از موقعیت اولیه به سمت راست حرکت می‌کند، رنگ آن به نارنجی تغییر می‌کند، سپس برمی‌گردد و رنگش دوباره سبز می‌شود. این حرکت بی‌نهایت تکرار می‌شود.

نکته مهم: انیمیشن‌ها در CSS فقط زمانی فعال می‌شوند که عنصر در صفحه نمایش داده شود. برای دیدن نتیجه، حتماً انیمیشن را روی یک عنصر موجود در HTML اعمال کنید و کد را در ویرایشگر آنلاین سایت تست کنید.