Урок 14. Частые ошибки
⚡ Кратко
Слишком долгие анимации, transition-all без нужды, анимация
«дорогих» свойств, игнорирование настройки «уменьшить движение».
Ошибка 1. Долгая анимация в интерфейсе
Как ломается: пользователь ждёт, пока меню «доедет». В первый раз красиво, на двадцатый — раздражает.
Ориентир: интерфейсная анимация — 150–300 мс. Всё, что дольше 400 мс, должно иметь очень вескую причину.
Ошибка 2. transition-all по умолчанию
❌ Анимируется всё подряд
<div class="transition-all duration-300 hover:bg-slate-100">…</div>✅ Только нужное
<div class="transition-colors duration-150 hover:bg-slate-100">…</div>Почему: transition-all заставляет браузер
следить за всеми свойствами, включая те, что меняются мгновенно и не должны
анимироваться — отсюда странные «подёргивания» при смене классов.
Ошибка 3. Анимация ширины и высоты
Как ломается: движение рывками, особенно на слабых устройствах и в длинных списках.
Почему: каждый кадр браузер заново считает раскладку всей
страницы. Заменяйте на scale, translate или
анимируйте opacity с уже готовыми размерами.
Ошибка 4. Игнор prefers-reduced-motion
Как ломается: для части пользователей интерфейс вызывает тошноту и головокружение — это не фигура речи, а описанное медицинское явление.
✅ Минимум усилий
<div class="motion-safe:animate-bounce motion-reduce:animate-none">…</div>Ошибка 5. Анимация без причины
Появляющиеся, уезжающие и мигающие элементы «просто потому что можем» рассеивают внимание. Полезное правило: анимация должна отвечать на вопрос «что изменилось и откуда это взялось». Если ответа нет — движение лишнее.
Ошибка 6. Забытая точка отсчёта
<div class="flex flex-wrap items-end gap-6">
<div class="h-16 w-24 rounded bg-sky-500 transition-transform duration-200 hover:scale-y-150"></div>
<div class="h-16 w-24 origin-bottom rounded bg-emerald-500 transition-transform duration-200 hover:scale-y-150"></div>
</div>Слева масштаб растёт от центра, справа — от нижнего края
(origin-bottom). Для «вырастающих» элементов почти всегда нужен
второй вариант.