حرکت

توکن‌های مدت، ایزینگ به سبک Apple و قرارداد حرکت کاهش‌یافته.

مدت‌ها

Token	Value	Use	Anchor
duration-fast	200ms	hover color and transform	bg:motion:duration-fast
duration-normal	300ms	card hover, FAQ answer collapse	bg:motion:duration-normal
duration-slow	600ms	scroll-reveal transitions	bg:motion:duration-slow
duration-colors	150ms	quick color flips	bg:motion:duration-colors

منحنی‌های ایزینگ

ease-out

bg:motion:ease-out

ease-apple

cubic-bezier(0.32, 0.72, 0, 1)

bg:motion:ease-apple

بلندشدن کارت

card-lift-sm	translateY(-2px)	bg:motion:card-lift-sm
card-lift-md	translateY(-4px)	bg:motion:card-lift-md

حرکت کاهش‌یافته

قانون قطعی. هر انیمیشنی باید شامل یک override برای @media (prefers-reduced-motion: reduce) باشد که آن را غیرفعال یا با حالت ایستا جایگزین کند. ریست پایه در base.css تمام transitionها را برای کاربران حرکت کاهش‌یافته خنثی می‌کند؛ انیمیشن‌های هر کامپوننت باید transformها در hover را نیز حذف کنند.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}