آموزش کار با انیمیشن ها یا Animations در CSS3

مقدمه

انیمیشن‌ها (Animations) در CSS3 امکان ایجاد حرکات و افکت‌های بصری جذاب روی عناصر را فراهم می‌کنند. با استفاده از Animations می‌توان تغییرات خودکار، افکت‌های متحرک و تجربه کاربری تعاملی طراحی کرد. برای یادگیری کامل CSS3 و استفاده حرفه‌ای از Animations، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی Animations

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

• تعریف مراحل انیمیشن با @keyframes
• تنظیم نام انیمیشن، مدت زمان، حالت تکرار و سرعت با animation
• ترکیب انیمیشن‌ها با transform، opacity و سایر ویژگی‌ها
• ایجاد افکت‌های روان و جذاب با transition همراه Animations

مثال عملی با کد

انیمیشن تغییر رنگ پس‌زمینه:

@keyframes bgChange {
  0% { background-color: #3498db; }
  50% { background-color: #2ecc71; }
  100% { background-color: #3498db; }
}

.box {
  width: 100px;
  height: 100px;
  animation: bgChange 3s infinite;
}

انیمیشن حرکت و چرخش:

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

.box {
  animation: moveRotate 4s linear infinite;
}

انیمیشن با تغییر opacity:

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.box {
  animation: fadeInOut 2s ease-in-out infinite;
}

نکات مهم و توضیحات تکمیلی

• @keyframes مراحل انیمیشن را مشخص می‌کند.
• ویژگی animation شامل نام، مدت زمان، حالت تکرار و زمان‌بندی است.
• ترکیب Animations با transform و opacity جلوه‌های جذاب ایجاد می‌کند.
• Animations در طراحی واکنش‌گرا تجربه کاربری پویا ایجاد می‌کنند.

ادامه آموزش CSS

برای یادگیری کامل ویژگی Transition و ایجاد افکت‌های نرم هنگام تغییر حالت عناصر، ادامه مسیر یادگیری را در دوره جامع دنبال کنید: ادامه یادگیری در دوره CSS.