Сайттағы анимация — әшекей емес, назардың бағдары: ол не пайда болғанын, ненің басуға келетінін және не жаңа ғана өзгергенін меңзейді. Мәселе қозғалыс ақпарат тасымалдауын қойып, өзі мақсатқа айналғанда басталады.
Пайдалы қозғалыстың үш рөлі
Анимацияны қоспас бұрын сұраймыз: ол үш рөлдің қайсысын атқарады?
- Бағдар: скролл кезіндегі reveal иерархияны көрсетеді — не басты, не қосалқы.
- Кері байланыс: hover пен tap «басқаныңды естідім» дегенді растайды.
- Байланыстылық: күйлер арасындағы ауысу нәрсенің қайдан шыққанын түсіндіреді.
Бізді құтқаратын ережелер
Блоктардың пайда болуына 0.7 секундқа дейін, микроәрекеттесулерге 0.3-ке дейін уақыт. Бүкіл жобаға бір easing. Тек transform мен opacity-ді анимациялаймыз — layout-қа ешқашан тимейміз.
Тағы бір темірдей ереже: әрбір шексіз анимация prefers-reduced-motion арқылы өшуге тиіс. Бұл «көрсету үшін» қойылған опция емес, қолданушыға деген қарапайым құрмет.
WORONAWEB КОМАНДАСЫ21.05.2026