08
תנועה
טוקני משך, easing בסגנון 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 |
עקומות easing
ease-out
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) המבטל אותה או מחליף אותה במצב סטטי. ה-reset הבסיסי ב-base.css כבר מנטרל את כל ה-transitions עבור משתמשי תנועה מופחתת; אנימציות פר-רכיב חייבות בנוסף להסיר transforms ב-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;
}
}