سی‌اس‌اس/animation

transform

animation

شبه‌کلاس‌ها و شبه‌عناصر

انیمیشن‌ با CSS

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

تفاوت animation با transition

transition فقط بین دو حالت (قبل و بعد) حرکت می‌کند.
animation می‌تواند چند مرحله‌ای (keyframe) باشد و تکرار شود.
animation مستقل از تعامل کاربر هم می‌تواند اجرا شود.

اجزای اصلی انیمیشن

برای استفاده از animation در CSS، دو بخش نیاز است:

تعریف keyframes که مراحل انیمیشن را مشخص می‌کند.
اتصال آن keyframe به یک عنصر با ویژگی‌های animation.

۱. تعریف keyframes

با استفاده از دستور @keyframes، انیمیشن ساخته می‌شود:

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

یا به‌صورت درصدی:

@keyframes moveAndRotate {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    transform: translateX(100px) rotate(180deg);
  }
  100% {
    transform: translateX(0) rotate(360deg);
  }
}

۲. اتصال انیمیشن به عنصر

پس از تعریف keyframes، با ویژگی animation آن را به عنصر نسبت می‌دهیم:

.box {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

ویژگی‌های animation

animation-name – نام keyframe تعریف‌شده
animation-duration – مدت زمان (مثلاً 2s یا 500ms)
animation-timing-function – نوع منحنی حرکت (linear, ease, ease-in, ease-out, steps, cubic-bezier)
animation-delay – تاخیر قبل از شروع
animation-iteration-count – تعداد تکرار (مثلاً infinite یا عدد)
animation-direction – جهت حرکت (normal, reverse, alternate, alternate-reverse)
animation-fill-mode – تعیین رفتار عنصر قبل و بعد از انیمیشن (none, forwards, backwards, both)
animation-play-state – کنترل اجرا یا توقف انیمیشن (running, paused)

حالت shorthand (خلاصه‌نویسی)

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

animation: fadeIn 2s ease-in 0.5s infinite alternate;

مثال‌های رایج

محو شدن (fade)

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fade 1s ease-in forwards;
}

تکان خوردن (shake)

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.error {
  animation: shake 0.5s ease;
}

حرکت بی‌پایان ابر یا ماشین

@keyframes moveLeft {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

.cloud {
  animation: moveLeft 20s linear infinite;
}

animation-fill-mode

این ویژگی رفتار عنصر را قبل یا بعد از انیمیشن مشخص می‌کند:

none – حالت پیش‌فرض؛ بدون حفظ حالت
forwards – مقدار نهایی حفظ می‌شود
backwards – مقدار ابتدایی قبل از شروع اعمال می‌شود
both – هر دو را ترکیب می‌کند

مثال:

.box {
  animation: grow 2s forwards;
}

کنترل با animation-play-state

می‌توان انیمیشن را متوقف یا ادامه داد:

.box:hover {
  animation-play-state: paused;
}

نکات حرفه‌ای

نام‌های انیمیشن باید یکتا باشند.
اگر از چند عنصر مشابه استفاده می‌کنید، می‌توان انیمیشن‌ها را کمی با delay از هم متمایز کرد.
برای کنترل دقیق می‌توان از cubic-bezier استفاده کرد.
با animation می‌توان بدون نیاز به جاوااسکریپت، افکت‌های حرفه‌ای ایجاد کرد.

انیمیشن ۳بعدی

می‌توان transformهای ۳بعدی را نیز با animation ترکیب کرد:

@keyframes spin3D {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

کارایی و بهینه‌سازی

animation بر پایه CSS توسط GPU پردازش می‌شود، بنابراین نسبتاً سریع و روان است.
برای بهترین عملکرد، از تغییر ویژگی‌هایی مثل opacity و transform استفاده کنید.
تغییر ویژگی‌هایی مثل top یا width می‌تواند عملکرد را کاهش دهد.

سئو و تجربه کاربری

انیمیشن بر سئو مستقیم تأثیر ندارد، اما تجربه کاربری بهتر موجب افزایش ماندگاری کاربر در سایت می‌شود.
در طراحی رابط کاربری جذاب و تعاملی مؤثر است.
بهتر است در صفحات اصلی یا سنگین از انیمیشن‌های زیاد پرهیز شود تا عملکرد سایت افت نکند.

تمرین پیشنهادی

یک دکمه طراحی کنید که وقتی کاربر ماوس را روی آن می‌برد:

رنگ پس‌زمینه تغییر کند
اندازه کمی بزرگ شود
با انیمیشن نرم و رفت‌وبرگشتی اجرا شود (alternate)

منابع بیشتر

جمع‌بندی

ویژگی animation در CSS ابزار فوق‌العاده‌ای برای افزودن حرکت و پویایی به رابط کاربری است. با کمک keyframes، می‌توان جلوه‌های پیچیده‌تری نسبت به transition پیاده‌سازی کرد. استفادهٔ درست و بهینه از animation تجربه کاربری را ارتقا می‌دهد و سایت را حرفه‌ای‌تر نشان می‌دهد.