Как пользоваться: Генератор CSS-анимаций
- Выберите пресет (наведите на плитку, чтобы посмотреть его), или начните с пустого ключевого кадра.
- Задайте длительность, задержку, количество повторов, easing и триггер (загрузка, наведение, клик, прокрутка).
- Редактируйте ключевые кадры на таймлайне: кликните, чтобы добавить, перетащите, чтобы переместить, и настройте свойства ползунками.
- Просмотрите анимацию по кадрам, замедлите её или включите луковую кожицу для точной настройки, затем скопируйте CSS, Tailwind или HTML.
Что можно создать
- Таймлайн ключевых кадров — добавляйте сколько угодно кадров, перетаскивайте их на новые проценты и задавайте каждому свой easing.
- Свойства — сдвиг по X/Y, поворот, 3D-поворот X/Y, масштаб, наклон, прозрачность, размытие, свечение (box-shadow), цвет фона и скругление углов. Недостающие значения интерполируются, поэтому трансформации не «прыгают».
- Триггеры — при загрузке, наведении, клике, при появлении во вьюпорте или CSS-only анимация, привязанная к прокрутке.
- Stagger — анимируйте список элемент за элементом с помощью одного 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-лоадеров и сочетайте анимации с тенями или градиентами.
Также ищут как: keyframes генератор, animate css.
Инструменты, которые хорошо сочетаются с Генератор CSS-анимаций
- Генератор CSS @keyframes — Визуальный редактор для @keyframes.
- Генератор CSS-анимаций при наведении — Создавайте анимации при наведении для кнопок, карточек, ссылок и иконок.
- Калькулятор clamp() — Введите минимальный и максимальный размер и диапазон ширины экрана.
- PX в REM конвертер — Переводите пиксели, rem и em, задав свой корневой размер шрифта, или вставьте целую таблицу стилей и преобразуйте все значения px за один раз.
Часто задаваемые вопросы
Можно ли использовать сгенерированный CSS бесплатно?
Да. Все пресеты написаны специально для этого инструмента, а результат — обычный CSS без библиотек. Лицензия или указание авторства не требуются.
Можно ли отредактировать уже существующую анимацию?
Да. Откройте Импорт существующих @keyframes, вставьте свой CSS, и он превратится в редактируемые ключевые кадры. Поддерживаются прозрачность, трансформации (translate, rotate, rotateX/Y, scale, skew), размытие, цвет фона, скругление углов и тени свечения.
Как запустить анимацию, когда элемент появляется в области просмотра?
Выберите триггер При появлении во вьюпорте — это небольшой скрипт на IntersectionObserver, который работает везде. Или выберите По прокрутке (только CSS) — тогда используется
animation-timeline: view() без JavaScript в браузерах, которые это поддерживают.Работает ли это с Tailwind CSS?
Да. На вкладках Tailwind вы получите блок
tailwind.config.js для v3 и блок @theme для v4, так что анимацию можно использовать как класс animate-*.Какие свойства лучше всего подходят для плавной анимации?
transform и opacity обрабатываются GPU-композитором и остаются плавными даже на слабых телефонах. Размытие, тени, цвета и скругления требуют больше ресурсов, поэтому используйте их осторожно на крупных элементах.Можно ли установить Генератор CSS-анимаций как веб-приложение и пользоваться им офлайн?
Да. Генератор CSS-анимаций — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.