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

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

Как пользоваться

Выберите основу в галерее. Настройте длительность, задержку, повторы и плавность. В разделе ключевых кадров выберите момент и добавьте нужные свойства: transform, opacity, background-color или border-radius. Каждое свойство можно удалить. В transform отдельно добавляются translateX, translateY, rotate, scale и skewX; операции применяются в этом порядке. Можно добавить до восьми кадров; проценты задаются точным числом. Вкладки кадров можно перетаскивать или перемещать сочетаниями Alt+← и Alt+→ на выбранной вкладке. Первый кадр должен иметь 0%, последний — 100%, промежуточные проценты должны возрастать без повторов. Ошибочные вкладки отмечены красным и знаком предупреждения; пока порядок не исправлен, предпросмотр, CSS и ссылка используют последние корректные кадры. Изменение настроек перезапускает предпросмотр, сохраняя паузу.

«Пауза» останавливает движение на текущем месте, «С начала» запускает его заново. Выбор кадра меняет редактируемые параметры, а не положение образца. Ссылка сохраняет настройки и кадры; фон и состояние воспроизведения относятся только к предпросмотру.

Что означает CSS

animation-duration задаёт длительность одного прохода, animation-delay — задержку перед первым запуском, animation-iteration-count — число повторов. Плавность animation-timing-function применяется между соседними кадрами.

normal проигрывает кадры вперёд, reverse — назад; alternate и alternate-reverse чередуют направления. fill-mode определяет вид до и после движения: backwards сохраняет начальный кадр во время задержки, forwards — конечный после завершения, both объединяет их.

Добавьте класс animated своему элементу. Смещение, поворот и масштаб объединены в transform; это объявление заменит собственный transform элемента. Образец вращается вокруг центра, большие смещения могут выходить за границы предпросмотра. Генератор редактирует transform, opacity, background-color и border-radius, без произвольного CSS. Если свойство отсутствует в кадре, оно не сбрасывается: браузер интерполирует его между кадрами, где оно задано. Для незаданных начального и конечного значений используется стиль самого элемента. У образца фон #2879ac и радиус 18px; ваш элемент может иметь другие исходные стили.

Экспорт содержит правило prefers-reduced-motion, отключающее анимацию по системной настройке пользователя. В этом режиме предпросмотр запускается только кнопкой.

Наведите указатель или переведите фокус на карточку для просмотра. Выберите основу и измените ключевые кадры ниже.

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

Фон предпросмотра
a

Настройки анимации

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

Готовый CSS

Включите JavaScript для редактирования. Ниже — готовый пример пульсации.

animation + @keyframes

.animated {
  animation: custom-animation 2s ease-in-out 0s infinite normal both;
}

@keyframes custom-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Отключаем анимацию, если пользователь выбрал уменьшение движения в настройках системы. */
@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

Для оформления элемента используйте градиенты и CSS-фильтры.