Генератор CSS-анимаций

Q: Что добавляет опция reduced-motion?

Блок `@media (prefers-reduced-motion: reduce)` с `animation: none` для пользователей, включивших уменьшение движения в операционной системе.

Создавайте CSS-анимации @keyframes из пресетов или своих кадров: длительность, задержка, повторы, направление, fill mode и кривая cubic-bezier.

Пресеты

Ключевые кадры

Имя анимации

Ключевые кадры (внутри @keyframes { … })

Одно правило на строку, например 50% { transform: scale(1.2); }. Редактируйте как угодно — предпросмотр обновляется сразу.

Тайминг

Длительностьs

Задержкаs

Направление

Режим заполнения

Бесконечно

Функция плавности

Отключать для тех, кто предпочитает меньше анимации

Предпросмотр

CSS-код

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.animated {
  animation: bounce 1s ease 0s infinite normal both;
}

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

Что такое Генератор CSS-анимаций?

Собирает полную CSS-анимацию: правило @keyframes, сокращённую запись animation и необязательное переопределение для prefers-reduced-motion. Начните с пресетов (fade, slide, bounce, pulse, shake, spin, heartbeat), свободно правьте ключевые кадры и настраивайте тайминг перетаскиваемой кривой cubic-bezier.

Как пользоваться Генератор CSS-анимаций

Выберите пресет или введите свои ключевые кадры (по одному правилу на строку).
Задайте имя анимации, длительность и задержку.
Выберите направление, fill mode и либо бесконечный повтор, либо число итераций.
Выберите функцию тайминга или перетащите маркеры cubic-bezier / введите X1, Y1, X2, Y2.
Нажмите «Повторить», чтобы посмотреть ещё раз, затем скопируйте CSS-код.

Пример

Ввод

Pulse preset, iterations 3, direction alternate, delay 0.5s, cubic-bezier(0.68, -0.6, 0.32, 1.6), reduced-motion off

Вывод

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.animated {
  animation: pulse 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.5s 3 alternate both;
}

Параметры записаны в порядке сокращения: имя, длительность, тайминг, задержка, число итераций, направление, fill mode.

Когда использовать Генератор CSS-анимаций

Подходит для эффектов появления, индикаторов загрузки, привлечения внимания и микровзаимодействий. Для простых смен состояния (цвет при наведении, размер) достаточно CSS-перехода. Оставляйте опцию reduced-motion включённой, чтобы пользователи, попросившие у системы меньше движения, не сталкивались с резкими перемещениями.

Как работает Генератор CSS-анимаций

Текст ключевых кадров оборачивается в @keyframes name { … }, а настройки записываются в стандартном порядке сокращения name duration timing-function delay iteration-count direction fill-mode. Редактор кривой ограничивает значения X диапазоном 0–1 (как требует CSS), а Y может выходить за пределы для эффекта отскока; если четыре значения совпадают с ключевым словом CSS (ease, linear, ease-in, ease-out, ease-in-out), записывается именно оно. Имя очищается до допустимого идентификатора CSS. Предпросмотр использует закрытое имя keyframes, поэтому не конфликтует с собственными анимациями страницы.

Распространенные Случаи Использования

Анимации появления через fade и slide-in
Бесконечные спиннеры и пульсирующие загрузчики
Эффект тряски при неверном вводе в форме
Подпрыгивающие индикаторы прокрутки вниз
Собственная кривая для фирменного движения

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

Что делает fill mode?

forwards сохраняет последний кадр после окончания анимации, backwards применяет первый кадр во время задержки, both делает и то и другое, none ни то ни другое.

Почему значения X у кривой ограничены диапазоном 0–1?

X это время, которое не может идти назад, поэтому CSS отвергает значения вне 0–1. Y это прогресс, и он может выходить за границы, создавая замах или отскок.