chevron_right

Генератор CSS Keyframes

Создавайте пользовательские CSS keyframes визуально, с живым предпросмотром и готовым кодом для копирования.

Имя keyframes

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

Плавность

Повторы

Повторять бесконечно

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

Смещение X (px)

Смещение Y (px)

Масштаб

Непрозрачность

Среднее состояние

Смещение X (px)

Смещение Y (px)

Масштаб

Непрозрачность

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

Смещение X (px)

Смещение Y (px)

Масштаб

Непрозрачность

Живой предпросмотр

Пульс

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

css

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

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

Создавайте переиспользуемые CSS-анимации с живым предпросмотром движения и готовыми keyframes.

Генератор CSS Grid

Создавайте адаптивные CSS Grid-макеты с живым предпросмотром и готовым кодом.

Генератор CSS-градиента для текста

Создавайте стили текста с градиентом с помощью наглядных настроек, живого предпросмотра и готового CSS.

Генератор CSS-переменных

Создание пользовательских CSS-свойств (переменных) для цветов и размеров дизайна.

Конвертер изображений

Конвертируйте изображения между форматами JPG, PNG, WebP и другими.

Список случайных цветов

Генерация списков случайных цветов в форматах HEX, RGB и HSL.

Sprite Sheet Cutter

Slice a sprite sheet into individual image tiles by specifying columns and rows. Each tile is a downloadable PNG.

apps

Больше инструментов

Просмотрите нашу полную коллекцию бесплатных онлайн-инструментов.

Настраивайте keyframes визуально до того, как писать анимацию вручную

Пользовательские keyframes дают больше свободы, чем готовый пресет, но написание их с нуля замедляет экспериментирование. Этот генератор помогает сначала собрать состояния движения визуально, а потом скопировать более чистый CSS.

Когда это особенно полезно

Он хорошо подходит для прототипирования переходов, создания фирменного движения и сравнения нескольких вариантов анимации. После генерации кода стоит проверить результат и в реальном интерфейсе, чтобы движение оставалось уместным.