Как пользоваться: Генератор CSS @keyframes
- Выберите пресет — наведите на плитки, чтобы посмотреть их, — или начните с пустого ключевого кадра.
- Задайте длительность, задержку, количество повторов, easing и триггер (загрузка, наведение, клик, прокрутка).
- Редактируйте ключевые кадры на таймлайне: кликните, чтобы добавить кадр, перетащите его, чтобы переместить, и настройте свойства ползунками.
- Перематывайте, замедляйте или включите луковую кожицу для точной настройки, затем скопируйте CSS, Tailwind или HTML.
Как работают @keyframes
Правило @keyframes задаёт стили, которые элемент должен иметь в определённых точках анимации, в процентах (from — это 0%, to — 100%). Браузер сам вычисляет промежуточные состояния. Ключевые кадры с одинаковыми стилями можно объединить в один селектор, например 0%, 100% { … }, а каждый кадр может задавать свой animation-timing-function для отрезка, который идёт за ним.
Что можно создать
- Таймлайн ключевых кадров — добавляйте сколько угодно кадров, перетаскивайте их на новые проценты и задавайте каждому свою функцию времени.
- Свойства — translate по X/Y, rotate, 3D-rotate X/Y, scale, skew, opacity, blur, glow (box-shadow), цвет фона и border-radius. Недостающие значения интерполируются, поэтому трансформации не «прыгают».
- Триггеры — при загрузке, наведении, клике, при появлении в области просмотра или CSS-only анимация по прокрутке.
- Стаггер — анимируйте список элемент за элементом с помощью одной 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 только к элементам, которые вот-вот начнут анимироваться. Настраивайте easing в генераторе cubic-bezier, добавьте спиннер из генератора CSS-лоадеров и сочетайте анимации с тенями или градиентами.
Также ищут как: keyframes css генератор, генератор @keyframes, визуальный редактор анимации css, таймлайн css анимации, создать css анимацию онлайн.
Инструменты, которые хорошо сочетаются с Генератор CSS @keyframes
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.
- Генератор CSS-анимаций при наведении — Создавайте анимации при наведении для кнопок, карточек, ссылок и иконок.
- Калькулятор clamp() — Введите минимальный и максимальный размер и диапазон ширины экрана.
- PX в REM конвертер — Переводите пиксели, rem и em, задав свой корневой размер шрифта, или вставьте целую таблицу стилей и преобразуйте все значения px за один раз.
Часто задаваемые вопросы
Можно ли бесплатно использовать сгенерированный CSS?
Можно ли отредактировать уже существующую анимацию?
Как запустить анимацию, когда элемент появляется в области просмотра?
animation-timeline: view() без JavaScript в браузерах, которые это поддерживают.Работает ли это с Tailwind CSS?
tailwind.config.js для v3 и блок @theme для v4, так что анимацию можно использовать как класс animate-*.Какие свойства лучше всего подходят для плавной анимации?
transform и opacity обрабатываются GPU-композитором и остаются плавными даже на медленных телефонах. Размытие, тени, цвета и border-radius требуют больше ресурсов, поэтому используйте их осторожно на больших элементах.