Перейти к содержимому
Aback Tools Logo

Генератор ключевых кадров анимации

Создавайте CSS @keyframes визуально с нашим интерактивным генератором ключевых кадров. Добавляйте несколько точек ключевых кадров, задавайте прозрачность, положение, поворот, масштаб и цвет в каждой точке — затем просмотрите анимацию и скопируйте CSS.

Animation Keyframe Generator
Build CSS @keyframes animations visually. Add keyframe stops, set opacity, transform, and color properties per stop, then preview the animation and copy the CSS.

Preview

Box

Settings

2.0s
infinite

Keyframe Stops (5)

0%
1.00
0px
0px
0°
1.0
25%
0.80
50px
-20px
45°
1.2
50%
1.00
100px
0px
90°
1.0
75%
0.80
50px
20px
45°
1.2
100%
1.00
0px
0px
0°
1.0
@keyframes anim-gfry {
  0% {
  opacity: 1;
  background-color: #6366f1;
  }

  25% {
  opacity: 0.8;
  transform: translate(50px, -20px) rotate(45deg) scale(1.2);
  background-color: #8b5cf6;
  }

  50% {
  opacity: 1;
  transform: translate(100px, 0px) rotate(90deg);
  background-color: #a855f7;
  }

  75% {
  opacity: 0.8;
  transform: translate(50px, 20px) rotate(45deg) scale(1.2);
  background-color: #d946ef;
  }

  100% {
  opacity: 1;
  background-color: #6366f1;
  }
}

.element {
  animation: anim-gfry 2s ease-in-out infinite;
  /* Add your element styles here */
}

Зачем использовать наш генератор ключевых кадров анимации?

  • Визуальный конструктор ключевых кадров: добавляйте и располагайте точки ключевых кадров на любом процентном значении (0 %-100 %) в интуитивном визуальном интерфейсе. Каждая точка поддерживает прозрачность, translate (X/Y), rotate, scale и background-color — всё настраивается ползунками и выбором цвета.
  • Предпросмотр анимации в реальном времени: наблюдайте, как анимация оживает, в панели предпросмотра, которая воспроизводит ключевые кадры в реальном времени. Меняйте длительность, easing и число повторов мгновенно — предпросмотр обновляется без перезагрузки страницы.
  • Чистый вывод CSS @keyframes: получайте корректно отформатированные правила @keyframes со всеми вашими свойствами анимации. Генератор выводит только реально используемые свойства — без лишних объявлений. Копируйте весь CSS анимации одним кликом.
  • 100 % приватно и бесплатно: вся генерация анимаций и отрисовка предпросмотра происходят локально в браузере. Данные не отправляются на сервер, регистрация не нужна, ограничений нет. Используйте в любом проекте — личном, коммерческом или клиентском.

Типичные варианты использования генератора ключевых кадров

  • Анимации лендингов: создавайте эффектные анимации появления для hero-секций, кнопок призыва к действию и карточек возможностей. Используйте fade-in, slide-up или scale, чтобы привлечь внимание к ключевым элементам и повысить вовлечённость.
  • Индикаторы загрузки и прогресса: проектируйте собственные анимации загрузки, индикаторы прогресса и эффекты skeleton screen. Анимации ключевых кадров идеальны для заметных состояний загрузки, удерживающих внимание пользователя.
  • Микровзаимодействия и обратная связь: добавляйте тонкую анимацию отклика к элементам интерфейса — кнопкам, переключателям и полям форм. Короткий отскок или переход цвета при наведении или клике даёт приятную визуальную обратную связь.
  • Навигация в стиле мобильных приложений: реализуйте переходы мобильного стиля — выезжающие меню, появление bottom sheet и анимации панели вкладок. Анимации ключевых кадров делают мобильный веб-опыт нативным и аккуратным.
  • Анимации для e-mail-рассылок: создавайте CSS-анимации для рассылок, работающие в поддерживающих почтовых клиентах. Простые анимации прозрачности и трансформации помогут вашим кампаниям выделиться в переполненных входящих.
  • Прототипирование и тестирование дизайна: быстро прототипируйте идеи анимации на этапе дизайна, не пишучи код. Экспериментируйте с таймингом, easing и сочетаниями свойств, чтобы найти идеальное движение для вашей дизайн-системы.

Что такое CSS @keyframes-анимации?

CSS @keyframes — мощное CSS-правило, позволяющее определять сложные анимации, задавая значения свойств в различных точках (ключевых кадрах) на временной шкале. В отличие от CSS-транзиций, анимирующих только между двумя состояниями (начало и конец), анимации ключевых кадров могут иметь несколько промежуточных состояний, что даёт сложные последовательности движения — отскоки, цветовые циклы и многошаговые трансформации.

Каждая точка ключевого кадра задаётся как процент от общей длительности анимации: от 0 % (начало) до 100 % (конец). В каждой точке вы определяете значения CSS-свойств, которые анимируемый элемент должен иметь в этот момент. Браузер автоматически интерполирует (сглаживает) значения между точками, создавая плавное движение. Функцией тайминга можно управлять как для всей анимации, так и для отдельного ключевого кадра для точного контроля поведения easing.

Как работает наш генератор ключевых кадров

Наш генератор предоставляет визуальный интерфейс для создания @keyframes-анимаций без написания CSS вручную. Вот как это работает:

  1. Добавьте точки ключевых кадров: начните с точек по умолчанию или выберите готовую анимацию (Fade In, Slide In, Bounce, Spin & Scale, Color Cycle, Wobble). Каждая точка соответствует моменту на временной шкале. Можно добавить до 10 точек и менять их положение ползунком процента.
  2. Настройте свойства для каждой точки: для каждой точки ключевого кадра настройте прозрачность, горизонтальное и вертикальное положение (translate), поворот, масштаб и цвет фона ползунками и выбором цвета. Анимированный элемент предпросмотра обновляется в реальном времени.
  3. Задайте параметры анимации: ползунком длительности (0,1 с-10 с) задайте скорость, выберите функцию easing (Linear, Ease, Bounce и др.) и число повторов (1-10 или бесконечно). Нажмите Play, чтобы увидеть анимацию, затем скопируйте сгенерированный CSS.

Свойства ключевых кадров

  • Opacity: управляет прозрачностью элемента в каждой точке. Значения от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Используйте для fade-in, fade-out и пульсации.
  • Translate X/Y (px): смещает элемент по горизонтали и вертикали относительно исходного положения. Отрицательные значения — влево/вверх, положительные — вправо/вниз. Сочетайте с другими трансформациями для скольжения, отскока и парения.
  • Rotate (deg): поворачивает элемент по часовой стрелке (положительно) или против (отрицательно) вокруг центра. Для вращения, покачивания и качания. Поддерживаются значения от -360 до 360 градусов.
  • Scale: меняет размер элемента относительно исходного. 1 — обычный размер, 0,5 — половина, 2 — двойной. Сочетайте с opacity для эффектных появлений.
  • Цвет фона: задаёт цвет фона элемента в каждой точке. Браузер плавно интерполирует между цветами, что даёт эффекты цветовых циклов и смены настроения.
  • Порядок трансформаций: при использовании нескольких функций они применяются по порядку — сначала translate, затем rotate, затем scale. Этот порядок влияет на итоговый вид, и сгенерированный CSS обрабатывает его корректно.

Конфиденциальность, безопасность и доступность

Ваша приватность — наш приоритет. Генератор ключевых кадров анимации обрабатывает всё локально в браузере с помощью CSS-рендеринга, встроенного в движок. Данные не отправляются на сервер — настройки анимации и конфигурации ключевых кадров никогда не покидают устройство. Инструмент полностью бесплатен, без регистрации, лимитов и скрытых ограничений. Смело используйте его для личных проектов, коммерческих сайтов и клиентской работы.

Часто задаваемые вопросы

CSS-транзиции анимируют между двумя состояниями (начало и конец) при срабатывании триггера. CSS @keyframes-анимации могут иметь несколько промежуточных точек, что позволяет создавать сложные многошаговые последовательности, запускаемые автоматически при загрузке страницы с контролем числа повторов.

Скорость управляется свойством duration. Используйте ползунок длительности для значений от 0,1 с до 10 с. Функция easing тоже влияет на воспринимаемую скорость: ease-in начинается медленно, ease-out заканчивается медленно, а linear сохраняет постоянную скорость.

Функция easing управляет ускорением и замедлением между точками ключевых кадров. Linear — постоянная скорость. Ease начинается быстро и замедляется в середине. Ease-in начинается медленно и ускоряется. Ease-out начинается быстро и замедляется. Ease-in-out сочетает плавные старт и финиш.

Можно добавить до 10 точек ключевых кадров. Двух точек (0 % и 100 %) достаточно для простой анимации, а 5-8 точек позволяют создавать сложные многошаговые последовательности с разными значениями прозрачности, положения, поворота, масштаба и цвета.

Да, сгенерированный CSS — стандартный CSS, работающий во всех современных браузерах (Chrome, Firefox, Safari, Edge, Opera). Для лучшей производительности используйте transform и opacity для плавных анимаций 60 fps с ускорением GPU.

Бесконечный повтор означает, что анимация повторяется непрерывно. Это полезно для фоновых эффектов, спиннеров загрузки, подпрыгивающих индикаторов и декоративного движения. Также можно выбрать конкретное число повторов (1-10) для анимаций появления.

Да, генератор ключевых кадров анимации полностью бесплатен и без ограничений. Без регистрации, без лимитов использования и без скрытых платежей. Вся обработка происходит локально в браузере.