انیمیشن و Motion با Tailwind CSS

1 مقدمه انیمیشن در وب (رایگان)
2
CSS Transitions
3
CSS Keyframe Animations
4
Hover و Focus Effects
5
Scroll Animations با Intersection Observer
6
Transition های Tailwind پیشرفته
7
مقدمه Framer Motion
8
AnimatePresence و Layout Animations
9
Micro-interactions
10
پروژه عملی: Landing Page متحرک
درس 1 از 10
⏱ 15 دقیقه

مقدمه انیمیشن در وب

مقدمه انیمیشن در وب

انیمیشن‌ها باعث زنده شدن رابط کاربری و بهبود تجربه کاربری می‌شوند.

انواع انیمیشن:

  • CSS Transitions: تغییرات ساده بین دو حالت
  • CSS Keyframes: انیمیشن‌های چند مرحله‌ای
  • JavaScript Animation: کنترل کامل با JS
  • Framer Motion: کتابخانه انیمیشن React

اصل‌های انیمیشن خوب:

  • انیمیشن باید هدفمند باشد
  • سرعت مناسب: ۲۰۰-۵۰۰ms
  • از easing مناسب استفاده کنید
  • انیمیشن نباید مانع دسترسی شود
  • prefers-reduced-motion را رعایت کنید

کاهش حرکت:

/* اگر کاربر کاهش حرکت را فعال کرده */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
درس بعدی →