Как пользоваться: Генератор CSS-анимаций при наведении
- Выберите пресет наведения, например «Рост», «Подъём», «Наклон» или «Дрожание».
- Переключите предпросмотр между кнопкой, карточкой, иконкой и текстом и наведите на него, чтобы проверить эффект.
- Меняйте длительность, функцию времени и ключевые кадры, пока эффект не будет выглядеть нужным образом.
- Скопируйте CSS — он также работает при
:focus-visibleдля пользователей клавиатуры.
Анимация при наведении и transition
Для простого перехода из состояния A в состояние B достаточно transition: при уходе указателя эффект плавно возвращается назад. Анимации по ключевым кадрам на :hover особенно полезны, когда эффект состоит из нескольких шагов (отскок, дрожание, покачивание) или должен повторяться, пока указатель находится над элементом. Этот генератор выводит и селекторы :hover, и :focus-visible, чтобы пользователи клавиатуры получали тот же отклик. Эффекты лучше делать сдержанными: около 150–300 мс обычно ощущаются как отзывчивые.
Что можно создать
- Шкала ключевых кадров — добавляйте сколько угодно кадров, перетаскивайте их на новые проценты и задавайте каждому свою функцию смягчения.
- Свойства — смещение по X/Y, поворот, объёмный поворот X/Y, масштаб, наклон, прозрачность, размытие, свечение (box-shadow), цвет фона и радиус скругления. Пропущенные значения интерполируются, поэтому трансформации не «прыгают».
- Триггеры — при загрузке, при наведении, при клике, при появлении в области просмотра или CSS-анимация, привязанная к прокрутке.
- Каскад — анимируйте список элемент за элементом с помощью одного CSS-свойства-переменной.
- Просмотр — ставьте на паузу, листайте по кадрам, замедляйте до ¼ скорости и включайте наложение кадров, чтобы видеть все ключевые кадры сразу.
- Экспорт — сокращённая или развёрнутая запись CSS, HTML, JavaScript, Tailwind v3 и v4, SCSS-миксин, отдельный файл демо или ссылка для обмена.
Сокращённая запись animation
| Параметр | Пример | Значение |
|---|---|---|
| название | fade-in-up | Правило @keyframes, которое нужно выполнить |
| длительность | 0.6s | Продолжительность одного цикла |
| функция времени | cubic-bezier(.33,1,.68,1) | Кривая скорости между ключевыми кадрами |
| задержка | 0.2s | Ожидание перед стартом; отрицательные значения запускают анимацию с середины |
| число повторов | infinite | Сколько раз выполнять цикл |
| направление | alternate | Проигрывать в обратном направлении каждый второй цикл |
| режим заполнения | both | Сохранять первый кадр до и последний кадр после проигрывания |
Доступность
Некоторых людей движение может вызывать головокружение или тошноту. Если включён параметр Учитывать prefers-reduced-motion, CSS отключает анимацию для посетителей, которые включили «уменьшение движения» в настройках операционной системы. Не допускайте мигания чаще трёх раз в секунду, делайте зацикленные анимации сдержанными или давайте пользователям возможность их остановить.
Советы по производительности
Анимируйте transform и opacity, а не top, left, width или margin: последние свойства заставляют браузер пересчитывать разметку на каждом кадре. Добавляйте will-change только к элементам, которые вот-вот начнут анимироваться. Подберите кривую с помощью генератора cubic-bezier, добавьте спиннер из генератора CSS-загрузчиков и сочетайте анимации с тенями или градиентами.
Также ищут как: генератор css hover, эффект наведения для карточки, hover эффекты css.
Инструменты, которые хорошо сочетаются с Генератор CSS-анимаций при наведении
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.
- Генератор CSS @keyframes — Визуальный редактор для @keyframes.
- Генератор глассморфизма — Создайте карточку с эффектом матового стекла с помощью ползунков и скопируйте кроссбраузерный CSS — с префиксом -webkit-backdrop-filter и запасным вариантом для старых браузеров.
- Калькулятор clamp() — Введите минимальный и максимальный размер и диапазон ширины экрана.
Часто задаваемые вопросы
Можно ли бесплатно использовать сгенерированный CSS?
Можно ли отредактировать уже существующую анимацию?
Как запустить анимацию, когда элемент появляется в области просмотра?
animation-timeline: view() без JavaScript в браузерах, которые это поддерживают.Работает ли это с Tailwind CSS?
tailwind.config.js для v3 и блок @theme для v4, так что анимацию можно использовать как класс animate-*.Какие свойства лучше всего подходят для плавной анимации?
transform и opacity обрабатываются GPU-композитором и остаются плавными даже на слабых телефонах. Размытие, тени, цвета и радиус скругления требуют больше ресурсов, поэтому применяйте их экономно к крупным элементам.