Коротко: анимация при наведении делается двумя способами. Плавное изменение свойств — через transition на :hover (подъём карточки, смена цвета, масштаб). Сложная последовательность — через @keyframes и animation. Для интерфейса обычно хватает transition с transform и opacity.
Что выбрать
| Задача | Инструмент |
|---|---|
| Смена цвета, тени | transition |
| Подъём, увеличение | transition + transform |
| Повторяющаяся анимация | @keyframes + animation |
| Плавный переход «туда-обратно» | transition на базовом правиле |
Вкладки: примеры
.btn {
background: #003F8F;
transition: background .25s ease;
}
.btn:hover { background: #002a61; }Простая смена цвета. transition обязательно указывайте на базовом селекторе — тогда анимация работает и «туда», и «обратно».
.card {
transition: transform .25s ease-out, box-shadow .25s ease-out;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 28px rgba(0,0,0,.14);
}Классический «подъём» карточки. translateY не влияет на раскладку — соседние элементы не сдвигаются.
.thumb { overflow: hidden; }
.thumb img { transition: transform .35s ease; }
.thumb:hover img { transform: scale(1.06); }«Зум» картинки внутри блока. overflow: hidden обязателен, иначе увеличенное изображение вылезет за границы.
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.08); }
100% { transform: scale(1); }
}
.badge:hover { animation: pulse .6s ease; }Когда нужно «пульсировать» или повторить набор шагов — используйте @keyframes. Для одиночного изменения свойств keyframes избыточны.
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}Практика: три эффекта для карточек
- Задайте базовые
transitionдляtransformиbox-shadow. - На
:hoverсдвиньте карточку вверх на 4–6px. - Добавьте усиленную тень.
- Для картинки — лёгкий
scale(1.05)внутри обрезки. - Проверьте, что эффект работает с клавиатуры (
:focus-visible).
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Анимация только «туда» | transition указан в :hover |
перенести в базовое правило |
| Вёрстка «дёргается» | анимируется margin/height |
использовать transform |
| Картинка вылезает | нет overflow: hidden |
добавить обрезку |
| Тормозит на телефоне | много анимаций сразу | уменьшить количество и длительность |
Проверьте себя
Вопросы и ответы
Когда анимация состоит из нескольких шагов или должна повторяться (пульсация, «покачивание», вращение).
Продублируйте состояние через :focus-within или меняйте по тапу классом. Иначе эффект «залипнет» после касания.
Косвенно: избыточные анимации замедляют страницу. Умеренные микроанимации наоборот повышают вовлечённость.
transform и opacity: их браузер обрабатывает на графическом ускорителе без пересчёта раскладки.
Итоги
- Простые эффекты —
transition, сложные —@keyframes. transitionзадавайте в базовом правиле.- Анимируйте
transformиopacity. - Не забывайте про
prefers-reduced-motionи клавиатуру.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.