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

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

Выберите анимацию из библиотеки более чем на сорок готовых пресетов, разбитых на группы: затухание, скольжение, масштаб, поворот, отскок, привлечение внимания, выход и загрузчики, — или соберите анимацию с нуля. Каждый ключевой кадр управляет прозрачностью, масштабом, поворотом, сдвигом по X и Y, наклоном по X и Y, размытием, скруглением, тенью и цветом фона. Уже есть готовый блок @keyframes? Вставьте его в окно импорта — визуальный редактор восстановит каждый шаг. Поставьте предпросмотр на паузу и потяните красный ползунок, чтобы рассмотреть любой промежуточный кадр. На выходе — обычный @keyframes CSS, готовый к вставке в любую таблицу стилей.

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

1. Выберите пресет анимации (затухание, слайд, отскок, вращение) или начните с нуля, добавляя ключевые кадры на таймлайн.
2. Настройте свойства на каждом ключевом кадре — transform, opacity, color, scale — и точно подберите кривую сглаживания, длительность и количество повторений.
3. Просмотрите анимацию в реальном времени, затем скопируйте сгенерированный CSS-код @keyframes или скачайте его как .css файл.

Когда использовать

• Добавление анимаций появления для hero-секций, модалок и карточек при загрузке страницы.
• Проектирование микровзаимодействий кнопок — лёгкого увеличения при наведении или шейка при ошибке формы.
• Прототипирование лоадеров и skeleton-состояний до того, как подключать их к фреймворку.

Результат

Фронтенд-разработчику нужна плавная анимация появления карточек на странице портфолио. Он настраивает анимацию ease-out длительностью 0,6 секунды с появлением снизу на 20px, копирует CSS и применяет с поочерёдной задержкой для каждой карточки.

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

Чем CSS animations отличаются от transitions?

transition один раз переходит из состояния A в B по триггеру (hover, focus, смена класса). animation работает по правилу @keyframes с любым числом промежуточных шагов, умеет зацикливаться и стартует при загрузке страницы без действий пользователя.

Почему анимация проигрывается один раз и пропадает?

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

Какой easing выбрать для естественного ощущения?

Для появления подойдёт ease-out — он замедляет движение в конце, и кадр выглядит улёгшимся. Для уходов наоборот: ease-in. cubic-bezier(0.34, 1.56, 0.64, 1) даёт лёгкий перелёт, который читается как игривый, не превращаясь в карикатуру.

Будут ли эти анимации работать в старых браузерах?

@keyframes поддерживается всеми браузерами, выпущенными после 2013 года, без вендорных префиксов. Для IE 10 и ниже нужен префикс -webkit-, но доля таких пользователей сегодня настолько мала, что лишний CSS обычно не окупается.

Как зациклить анимацию навсегда?

Поставьте iteration-count в infinite и сочетайте с direction: alternate — каждый цикл будет проигрываться в обратном направлении, получится плавное движение туда-сюда (идеально для pulse и shake) вместо резкого скачка к началу.

Похожие инструменты