Генератор CSS Анимаций
Создавайте CSS-анимации с 16 пресетами. Настраивайте длительность и получайте готовый код.
Свойства анимации
CSS-код
Генератор CSS Анимаций
Генерируйте CSS-анимации мгновенно с нашим визуальным конструктором. 16 встроенных пресетов.
Популярные
О генераторе CSS Анимаций
Шестнадцать готовых keyframe-эффектов, среди них bounce, shake, pulse, fade, slide, rotate, flip, swing, rubber band, jello, heartbeat, flash и zoom, настраиваются здесь ползунками и списками: длительность, задержка, число повторов, направление, функция плавности и режим заполнения. Квадрат предпросмотра проигрывает результат заново при каждом изменении. В панели вывода — полное правило @keyframes и сокращённая запись animation с вашим собственным именем анимации, готовые к вставке в таблицу стилей.
Примеры использования
Как использовать
Выберите эффект в сетке пресетов вверху: Bounce, Shake, Pulse, Fade In, Slide In Left, Rotate, Flip, Swing, Jello, Heart Beat, Zoom In и другие.
Посмотрите, как фиолетовый квадрат в панели предпросмотра повторяет эффект, а затем задайте тайминг в секундах ползунками Duration и Delay.
Выберите Iteration Count — 1, 2, 3, 5 или Infinite — и Direction: Normal, Reverse, Alternate либо Alternate Reverse.
Задайте Timing Function — Ease, Ease In, Ease Out, Ease In Out, Linear, Step Start или Step End — и Fill Mode: None, Forwards, Backwards либо Both.
Переименуйте ключевые кадры в поле Animation Name, чтобы правило не конфликтовало с CSS, который уже есть на вашем сайте.
Возьмите однострочную сокращённую запись над панелью кода или нажмите «Копировать», чтобы получить полный блок @keyframes вместе с правилом .animated-element.
Советы профессионалов
- Вставляйте содержимое напрямую — Генератор CSS-анимаций распознаёт типичные форматы ввода и сам подбирает разумные настройки.
- Используйте горячие клавиши (Ctrl/Cmd+A — выделить всё, Ctrl/Cmd+C — скопировать), чтобы ускорить работу с Генератором CSS-анимаций.
- Очень большие данные разбивайте на части: вкладка браузера обычно справляется с мегабайтами текста, но разбор огромных объёмов может ненадолго подвесить интерфейс.
- Генератор CSS-анимаций не ведёт логи и не сохраняет введённые данные. Если вам нужна история, копируйте важные результаты в локальный файл или в заметки.
- Сочетайте Генератор CSS-анимаций с другими инструментами сайта (форматировщиками, конвертерами, кодировщиками), чтобы выстроить полный конвейер обработки данных, не выходя из браузера.
Часто задаваемые вопросы
Да, полностью бесплатный: без регистрации, без API-ключа, без водяных знаков и без ограничений по количеству использований.
Нет. Генератор CSS-анимаций работает целиком на стороне клиента, в вашем браузере. Введённые данные не попадают на наши серверы.
Жёсткого ограничения нет, но на объёмах больше нескольких мегабайт возможны замедления — всё зависит от объёма памяти вашего устройства.
Да. Всё, что вы получили с помощью Генератора CSS-анимаций, можно свободно использовать в любых личных и коммерческих проектах.
Основная логика выполняется в браузере на JavaScript, поэтому после первой загрузки вы обычно можете продолжать работу без подключения к интернету.
Нет. Генератор CSS-анимаций работает в вашем браузере, поэтому вы можете обработать столько данных, сколько потянет ваше устройство, — без API-ключей и без троттлинга.