06 · Анимация
Движение
Сдержанно и осмысленно. Анимация помогает понять интерфейс, а не украшает его. Двигаем только прозрачность и трансформации.
Принципы
Три правила движения
01
Со смыслом
Каждое движение объясняет: откуда элемент пришёл, что изменилось, куда ведёт действие.
02
Быстро
Микровзаимодействия 150–300 мс, появления 700–900 мс. Пользователь не должен ждать анимацию.
03
Бережно
Только transform и opacity. Всегда уважаем prefers-reduced-motion.
Инструмент · клик перезапускает
Живые паттерны
Reveal снизуtranslateY + opacity · expo-out · 800ms
Spring-ховерscale · spring · 500ms
Отрисовка знакаstroke-dashoffset · 1200ms
Стаггерпо 80мс между элементами
Кривые
Два изинга на всё
Expo-out — появления
cubic-bezier(.16, 1, .3, 1)
Spring — ховеры
cubic-bezier(.34, 1.56, .64, 1)
Тайминги
Сколько длится движение
Микро
150–300
Ховеры, нажатия, переключатели (мс).
Появления
700–900
Reveal-блоки при скролле (мс).
Стаггер
80–90
Задержка между соседними элементами (мс).
Переходы
≤ 500
Смена состояний и страниц (мс).