08

Շարժում

Տևողության թոքեններ, Apple-ոճի easing և reduced-motion պայմանագիր։

Տևողություններ

TokenValueUseAnchor
duration-fast200mshover color and transformbg:motion:duration-fast
duration-normal300mscard hover, FAQ answer collapsebg:motion:duration-normal
duration-slow600msscroll-reveal transitionsbg:motion:duration-slow
duration-colors150msquick color flipsbg: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-smtranslateY(-2px)bg:motion:card-lift-sm
card-lift-mdtranslateY(-4px)bg:motion:card-lift-md

Կրճատված շարժում

Կոշտ կանոն։ Յուրաքանչյուր անիմացիա պետք է ներառի @media (prefers-reduced-motion: reduce) override, որն այն անջատում է կամ փոխարինում ստատիկ վիճակով։ base.css-ում հիմքի reset-ն արդեն չեզոքացնում է բոլոր transition-ները reduced-motion օգտատերերի համար. ըստ բաղադրիչի անիմացիաները պետք է լրացուցիչ հեռացնեն 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;
  }
}