Микроанимации — это небольшие, часто едва заметные движения интерфейса: галочка, которая плавно появляется после успешной отправки формы, лёгкое покачивание иконки корзины при добавлении товара, индикатор загрузки, который вращается, пока идёт запрос к серверу. Каждая из них по отдельности выглядит мелочью.
Но вместе такие детали формируют ощущение отзывчивого, живого интерфейса, который реагирует на каждое действие пользователя, а не просто молча выполняет команды. Отсутствие обратной связи, наоборот, заставляет сомневаться, сработало ли действие вообще, особенно на медленном соединении.
Хорошая микроанимация решает конкретную коммуникативную задачу, а не существует ради красоты самой по себе. Индикатор загрузки говорит "подождите, идёт процесс". Анимация галочки говорит "готово, всё получилось". Если анимация не несёт такого смысла, скорее всего, она просто отвлекает внимание.
Длительность имеет значение не меньше, чем сам эффект — микроанимации почти всегда короткие, доли секунды. Пользователь не должен ждать, пока анимация доиграется, чтобы продолжить работу с интерфейсом, иначе даже красивый эффект начинает восприниматься как задержка и препятствие.
Многие микроанимации реализуются исключительно на CSS через transition и transform — изменение размера кнопки при нажатии, лёгкая тряска поля с ошибкой валидации, плавное появление всплывающей подсказки. Для более сложных сценариев, завязанных на данные с сервера, добавляется JavaScript, который управляет CSS-классами.
Библиотеки готовых микроанимаций существуют, но для большинства простых случаев вроде тех, что перечислены выше, вполне достаточно нескольких строк собственного CSS, без подключения дополнительных зависимостей в проект.
Обзор принципов хорошей анимации интерфейса и разбор конкретных примеров можно найти в материалах раздела про анимации на web.dev.
