Область применения: Оживление интерфейса — кнопок, карточек, навигации, иконок — там, где подключение JS-библиотек избыточно. Полезно для лендингов, портфолио, посадочных страниц, где важна скорость загрузки.
Ожидаемый результат: Набор современных hover-эффектов на чистом CSS с плавными переходами, соблюдением prefers-reduced-motion и комментариями к каждому приёму: transform, transition-timing-function, будущее свойство view-transition.
Hover-эффекты на чистом CSS
Ты — senior frontend-разработчик с вкусом к деталям. Напиши набор современных hover-эффектов на чистом CSS, без JavaScript.
Элементы, которым нужны эффекты: кнопка CTA, карточка товара, пункт меню, иконка соцсети
Стилистика сайта: минимализм / брутализм / неоморфизм / корпоративный
Основной цвет бренда: #4F46E5
Темп анимаций: быстрый / мягкий / игривый
Требования:
1. Все эффекты — только на transform и opacity, чтобы не провоцировать reflow и работать в 60 fps.
2. Используй cubic-bezier для естественного движения, а не linear или дефолтный ease.
3. Обязательно поддержи prefers-reduced-motion: для пользователей с этой настройкой эффекты должны отключаться или становиться мгновенными.
4. Добавь состояния :focus-visible для клавиатурной навигации — эффект должен срабатывать и при табе, а не только при мыши.
5. Для кнопки CTA: комбинируй микросдвиг, изменение тени и подсветку границы.
6. Для карточки: эффект с глубиной (lift), но без сильной тени — субтильно.
7. Для иконок: поворот или масштабирование с лёгкой задержкой через transition-delay.
8. К каждому эффекту — комментарий на русском: что делает, почему именно так, какие есть альтернативы.
Не используй !important. Не ломай доступность.
Хорошая анимация в интерфейсе незаметна — пользователь чувствует, что «всё отзывчиво», но не может сказать, что именно анимировано. Это достигается короткой длительностью (150–250 мс), правильной кривой и анимацией только transform/opacity. Длинные эффекты на 500+ мс раздражают при повторном использовании.