فرض کنید در یک سایت فروشگاهی، بعد از ثبت سفارش، پیام «سفارش شما ثبت شد» به‌آرامی روی صفحه ظاهر شود؛ یا یک دایره کوچک هنگام بارگذاری بچرخد. به این تغییرات تصویری که در طول زمان اتفاق می‌افتند، انیمیشن می‌گوییم.

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

Animation در CSS چیست و چه کاربردی دارد؟

انیمیشن یعنی ظاهر یک عنصر در چند لحظه تغییر کند. مثلاً یک مربع آبی به‌تدریج بنفش شود، یک پیام از پایین به بالا بیاید یا یک علامت بارگذاری بچرخد.

به این نمونه نگاه کنید: مربع در ابتدا سمت راست است، در میانه مسیر حرکت می‌کند و در پایان به سمت چپ می‌رسد. هنوز لازم نیست کدی بنویسید؛ فقط به تفاوت جای مربع در سه لحظه توجه کنید.

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

ساخت اولین انیمیشن با HTML و CSS

برای شروع، یک مربع آبی می‌سازیم که در دو ثانیه به بنفش تبدیل می‌شه. به‌جای چند باکس کد پراکنده، یک فایل کامل داریم؛ می‌تونی همون رو در index.html ذخیره و اجرا کنی.

1. ساخت عنصر: یک
   در بخش body قرار می‌گیره.
2. ظاهر اولیه: با CSS برای مربع عرض، ارتفاع و رنگ آبی تعریف می‌کنیم.
3. تعریف تغییر: داخل @keyframes changeColor می‌گیم رنگ از آبی (from) به بنفش (to) برسه.
4. اجرای تغییر: با animation-name نام انیمیشن و با animation-duration: 2s مدت اون رو به عنصر می‌دیم.

کد نمونه یک بار اجرا می‌شه و بعد رنگ مربع به حالت اولیه برمی‌گرده. این رفتار طبیعی CSS است. اگر می‌خوای انیمیشن تکرار بشه، مقدار animation-iteration-count رو تغییر بده.

آشنایی با @keyframes و مراحل انیمیشن

در مثال قبل فقط from و to داشتیم. حالا یک مرحله وسط هم اضافه می‌کنیم: 0% آغاز چرخه، 50% وسط چرخه و 100% پایان چرخه است. این درصدها درصد زمان انیمیشن هستن، نه مقدار جابه‌جایی.

در کد بالا، translateX(100px) مربع رو ۱۰۰ پیکسل به سمت راست جابه‌جا می‌کنه و در پایان به جای اول برمی‌گردونه. برای حرکت‌های ساده، transform معمولاً انتخاب مناسب‌تری از تغییر مداوم left است.

چهار تغییری که بیشتر می‌بینی رو داخل یک گالری عکس بررسی می‌کنیم. در هر کارت فقط یک افکت اصلی آموزش داده می‌شه: حرکت افقی، چرخش، محوشدن و تغییر اندازه. روی «اجرای دوباره افکت‌ها» کلیک کن تا تفاوت‌ها رو واضح ببینی.

گالری تصویر؛ چهار حرکت متفاوتاجرای دوباره افکت‌ها

تصاویر آموزشی نمونه؛ این افکت‌ها هنگام باز شدن گالری اجرا می‌شن و با دکمه بالا قابل تکرارن.

ویژگی‌های Animation به زبان ساده

حالا که انیمیشن ساده رو ساختی، سراغ تنظیمات می‌ریم. هر ویژگی رو با یک توضیح کوتاه یاد بگیر و بعد اثرش رو در ابزار تعاملی بخش ۵ امتحان کن.

animation-name و animation-duration

animation-name اسم @keyframes رو به عنصر وصل می‌کنه. animation-duration زمان هر چرخه رو تعیین می‌کنه؛ مثلاً 2s یعنی دو ثانیه و 500ms یعنی نیم ثانیه. مقدار پیش‌فرض Duration صفره، پس اگر زمان ندی معمولاً حرکت قابل مشاهده‌ای نمی‌بینی.

animation-delay؛ شروع با تأخیر

اگر بخوای حرکت یک ثانیه دیرتر شروع بشه، می‌نویسی animation-delay: 1s. مقدار منفی مثل -1s هم مجازه و باعث می‌شه انیمیشن از بخشی جلوتر از چرخه شروع بشه.

animation-timing-function؛ حرکت با چه شتابی؟

فرض کن دو مربع باید در دو ثانیه یک مسیر یکسان رو طی کنن. یکی می‌تونه با سرعت ثابت حرکت کنه و دیگری آهسته شروع بشه و در پایان کند بشه. این تفاوت رو Timing Function تعیین می‌کنه.

در این نمودارها، محور افقی زمان و محور عمودی مقدار پیشرفت حرکت رو نشون می‌ده. همه مسیر یکسانی دارن؛ فقط نحوه رسیدن از شروع به پایان فرق می‌کنه.

برای مقایسه شتاب‌ها، در ابزار تولید کد بخش ۵، Timing Function رو تغییر بده؛ هر نسخه را کپی کن و در مرورگر اجرا کن.

animation-iteration-count و animation-direction

• normal: از شروع به پایان در هر چرخه.
• reverse: از پایان به شروع.
• alternate: یک بار رفت و یک بار برگشت.
• alternate-reverse: چرخه اول برعکس و چرخه بعد عادی.

animation-fill-mode؛ قبل و بعد از حرکت چه می‌شود؟

فرض کن یک کارت در پایان حرکت به اندازه بزرگ‌تر می‌رسه. آیا باید بزرگ باقی بمونه یا به ظاهر معمول خودش برگرده؟ این رفتار رو animation-fill-mode کنترل می‌کنه.

• none: اثر انیمیشن خارج از زمان اجرای فعال حفظ نمی‌شه.
• forwards: بعد از پایان، ظاهر آخرین فریم مؤثر باقی می‌مونه.
• backwards: هنگام تأخیر، ظاهر فریم شروع اعمال می‌شه.
• both: ترکیب دو حالت قبلی.

animation-play-state؛ توقف و ادامه

running یعنی انیمیشن اجرا بشه و paused یعنی موقتاً در همون نقطه متوقف بشه. برای مثال می‌تونی با رفتن ماوس روی عنصر، حرکت رو متوقف کنی.

خلاصه‌نویسی با animation

به‌جای چند ویژگی جدا، می‌تونی تنظیمات رو خلاصه بنویسی: animation: moveBox 2s ease-in-out 1s infinite alternate. یعنی انیمیشن moveBox با مدت دو ثانیه، تأخیر یک ثانیه، سرعت نرم، تکرار دائمی و جهت رفت‌وبرگشتی اجرا می‌شه.

وقتی دو مقدار زمانی وجود داره، اولی Duration و دومی Delay است. برای شروع، نوشتن ویژگی‌ها به‌صورت جداگانه هم کاملاً مناسبه.

ابزار تعاملی CSS Animation

حالا تنظیمات رو تغییر بده و همون لحظه حرکت مربع آبی رو ببین. ابزار، کد HTML و CSS مطابق همین تنظیمات رو هم تولید می‌کنه تا در مرورگر خودت اجراش کنی.

مثال کاربردی Animation؛ نمایش مراحل ثبت سفارش

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

این دو کارت، دو لحظه از انیمیشن رو نشون می‌دن. برای دیدن چرخش علامت انتظار و ورود نرم پیام موفقیت، کد کامل زیر رو کپی کن و در فایل index.html اجرا کن.

در نمونه زیر، @keyframes spin دایره انتظار رو می‌چرخونه. دو مجموعه فریم دیگه تعیین می‌کنن پیام پردازش کی محو بشه و پیام موفقیت کی از پایین ظاهر بشه. کل چرخه ۶ ثانیه طول می‌کشه و تکرار می‌شه؛ در پروژه واقعی، پایان پردازش باید بر اساس پاسخ سرور مشخص بشه، نه صرفاً گذشت زمان.

تفاوت Animation و Transition در CSS

هر دو ویژگی ظاهر یک عنصر رو به‌تدریج تغییر می‌دن؛ اما transition معمولاً بعد از تغییر وضعیت (مثلاً Hover) شروع می‌شه. در مقابل، animation می‌تونه بدون دخالت کاربر اجرا بشه، چند مرحله داشته باشه و تکرار بشه.

در کد کامل زیر، Transition فقط هنگام رفتن نشانگر روی دکمه اجرا می‌شه؛ اما Animation روی دایره بدون نیاز به تعامل شروع می‌شه. هر دو رو داخل یک فایل HTML می‌تونی آزمایش کنی.

انتخاب کاربردی: برای Hover دکمه معمولاً transition، برای ورود کارت یا نشان بارگذاری animation مناسب‌تره. نیازی نیست برای فهم این تفاوت، یک فایل HTML دیگه تکرار کنیم.

اشتباهات رایج و نکات مهم

• نام اشتباه: مقدار animation-name باید دقیقاً با نام @keyframes یکسان باشه.
• مدت صفر: اگر animation-duration تعیین نکنی، حرکت معمولاً دیده نمی‌شه.
• تکرار بی‌دلیل: infinite رو فقط وقتی به‌کار ببر که حرکت دائمی معنی داشته باشه.
• تفاوت حرکت بصری و چیدمان: transform ظاهر عنصر رو جابه‌جا می‌کنه اما جای اصلی اون در چیدمان حفظ می‌شه.
• کارایی: برای حرکت و محوشدن، اغلب transform و opacity بهتر از تغییر مداوم top یا width هستن.
• دسترس‌پذیری: با @media (prefers-reduced-motion: reduce) حرکت‌های غیرضروری رو برای کاربرانی که کاهش حرکت رو فعال کردن، محدود یا خاموش کن.

ویژگی‌های پیشرفته‌تری مثل animation-timeline هم وجود دارن که می‌تونن انیمیشن رو به اسکرول وصل کنن؛ برای شروع همین مفاهیم پایه کافیه.

تمرین عملی CSS Animation

تمرین: با ابزار تولید کد یک انیمیشن Slide بساز که دو ثانیه طول بکشه، سه بار تکرار بشه و رفت‌وبرگشتی حرکت کنه. کد رو کپی کن و در مرورگر خودت نتیجه رو ببین.

جمع‌بندی آموزش CSS Animation

برای ساخت انیمیشن در CSS، اول با @keyframes مشخص می‌کنی عنصر چه تغییراتی داشته باشه. بعد با ویژگی‌های Animation مدت، سرعت، تأخیر، جهت و تکرار رو تعیین می‌کنی. بهترین راه یادگیری اینه که یک مثال ساده بسازی و هر بار فقط یک تنظیم رو تغییر بدی.