মোশন

সময়কাল টোকেন, 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

রিডিউসড মোশন

কঠোর নিয়ম। প্রতিটি অ্যানিমেশনে অবশ্যই একটি @media (prefers-reduced-motion: reduce) ওভাররাইড থাকতে হবে যা এটি নিষ্ক্রিয় করে বা একটি স্ট্যাটিক অবস্থা দিয়ে প্রতিস্থাপন করে। base.css-এ বেস রিসেট ইতিমধ্যেই রিডিউসড-মোশন ব্যবহারকারীদের জন্য সমস্ত ট্রানজিশন নিষ্ক্রিয় করে; প্রতি-কম্পোনেন্ট অ্যানিমেশনগুলিকে অতিরিক্তভাবে হোভারে ট্রান্সফর্ম অপসারণ করতে হবে।

@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;
  }
}