Анимация на сайте — это не украшение, а разметка внимания: она подсказывает, что появилось, что кликабельно и что только что изменилось. Проблемы начинаются, когда движение перестаёт нести информацию и становится самоцелью.
Три роли полезного движения
Прежде чем добавить анимацию, мы спрашиваем: какую из трёх ролей она играет?
- Ориентация: reveal при скролле показывает иерархию — что главное, что второстепенное.
- Обратная связь: hover и tap подтверждают «я услышал твой клик».
- Связность: переход между состояниями объясняет, откуда что взялось.
Правила, которые нас спасают
Длительность до 0.7 секунды для появления блоков и до 0.3 — для микровзаимодействий. Один easing на весь проект. Анимируем только transform и opacity — layout не трогаем никогда.
И железное правило: каждая бесконечная анимация должна отключаться через prefers-reduced-motion. Это не опция «для галочки», а базовое уважение к пользователю.
КОМАНДА WORONAWEB21.05.2026