Microinteractions — маленькие анимации и feedback. Сайт \"живой\".
Что такое
4 части: trigger, rules, feedback, loops.
Примеры
Hover, click, loading, validation, like, notification, scroll progress.
Зачем нужно
Feedback, UX, brand personality, engagement.
Hover
Темнее, shadow, scale. 200ms.
Click
Scale 0.95, темнее.
Loading
Spinner, progress bar, skeleton.
Success
Зелёный check scale-in.
Error
Shake, красный border.
Scroll effects
Parallax, AOS, scroll-triggered. Не перебарщивать.
Page transitions
Fade, slide. 200-400ms.
Notification
Toast slide-in 3-5s fade-out.
Timing
Quick 100-200ms. Medium 300-500. Slow 500-800.
Easing
Ease-out — самое естественное.
CSS vs JS
CSS — simple, GPU. JS — complex.
Performance
Transform, opacity GPU. will-change.
Accessibility
prefers-reduced-motion.
Ошибки
Слишком много, slow, auto-play, плохой perf, нет a11y.
Сайт.uz
Subtle microinteractions. Hover, validation, modal, notification, AOS. Dwell 4:30 (было 3:50).