Генератор CSS-анимации (keyframes)

Выберите шаблон анимации, настройте длительность, ритм и повторение, просмотрите результат в реальном времени и скопируйте полный код @keyframes. Обработка 100% локально — ничего не отправляется на сервер.

Пример:

Анимация

Длительность (с)

Кривая синхронизации

Задержка (с)

Повторение

CSS-код

@keyframes fade-animation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.mon-element {
  animation: fade-animation 1.2s ease-in-out 0s infinite;
}

Как это работает

Правило @keyframes описывает состояние элемента в разные проценты длительности анимации, а свойство animation привязывает эту последовательность к элементу с длительностью, темпом и количеством повторений. Выберите готовый шаблон (появление, отскок, вращение...), настройте параметры и получите итоговый код с правилом @keyframes и объявлением animation.

Как применить эту анимацию к своему элементу?

Скопируйте правило @keyframes как есть в вашу таблицу стилей, затем замените селектор .mon-element на класс или идентификатор HTML-элемента, который вы хотите анимировать.

Какую кривую синхронизации выбрать?

ease-in-out подходит для большинства интерфейсных анимаций, так как начинается и заканчивается плавно; linear лучше подходит для непрерывного вращения (например, индикатора загрузки), а ease-out дает эффект чёткого появления, часто используемый для появления элементов.

Код генерируется и предпросматривается полностью в вашем браузере, без подключения к серверу.