SUPER EASY UTILS

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

Создавайте CSS-анимации визуально и мгновенно получайте готовый код.

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

Start
Animate

Сгенерированный CSS

@keyframes my-animation {
  0% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
    opacity: 1;
    background-color: #3b82f6;
  }
  100% {
    transform: translate(100px, 0px) scale(1.2) rotate(45deg);
    opacity: 1;
    background-color: #ec4899;
  }
}

.animated-element {
  animation: my-animation 2s ease-in-out 0s infinite normal forwards;
}

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

2s

Начальное состояние0%

0, 0
1
0°
1
#3b82f6

Конечное состояние100%

100, 0
1.2
45°
1
#ec4899
Далее
Читать полное руководство
Или попробуйте эти
Генератор CSS-паттерновГенератор CSS-градиентовГенератор ASCII-арта

Рекомендуемые инструменты

Подборка полезных утилит

Создание CSS-анимаций без ручного кода

Обзор

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

Как пользоваться (по шагам)

  1. 1

    Выберите тип анимации

    Появление, сдвиг, отскок, вращение или другой пресет.

  2. 2

    Настройте тайминг

    Длительность, функцию ускорения, задержку и число повторов.

  3. 3

    Скопируйте CSS

    Вставьте сгенерированные keyframes и правило animation в таблицу стилей.

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

Вы выбираете тип, длительность, функцию тайминга, задержку и число повторов, а инструмент строит правило @keyframes и сокращённое свойство animation. Функция тайминга (ease, linear, cubic-bezier) задаёт ускорение движения, а длительность и повторы — скорость и повторение. Вы видите эффект вживую и копируете CSS в таблицу стилей.

Когда пригодится

Добавление мягкой анимации появления в hero-секцию или карточку. Создание спиннера загрузки или эффекта пульса. Прототипирование движения до внесения в код.

Частые вопросы

Задаёт кривую ускорения движения — ease начинает и заканчивает медленно, linear равномерна, cubic-bezier позволяет задать свою кривую.

Генератор CSS-анимаций | Super Easy Utils