Генератор CSS-анимации keyframe с живым предпросмотром
Генератор CSS-анимации keyframe создаёт блок @keyframes и соответствующую сокращённую запись animation из выбранного свойства и настроек анимации. Выберите translate, rotate, scale, opacity или background, затем укажите начальное и конечное значения, длительность, тайминг и число итераций. Живой предпросмотр показывает анимацию по мере настройки параметров, и вы можете скопировать сгенерированные значения.
Генератор CSS-анимации keyframe создаёт блок @keyframes и сокращённую запись animation из выбранных настроек. Выберите translate, rotate, scale, opacity или background в качестве анимируемого свойства, введите начальное и конечное значения и задайте длительность, тайминг и число итераций. Живой предпросмотр позволяет увидеть получившуюся анимацию во время работы.
Преобразование использует эти настройки для записи определения кейфреймов и соответствующей сокращённой записи animation. Выбранное свойство определяет, что меняется между начальным и конечным значениями; длительность, тайминг и число итераций формируют ход анимации. Вы можете скопировать нужные сгенерированные значения для вашего CSS.
CSS-кейфреймы описывают изменения между состояниями анимации, а сокращённая запись animation объединяет настройки анимации в одном объявлении. Генерация обоих помогает при прототипировании движения, подготовке тестовых данных или добавлении анимации в таблицу стилей. Предпросмотр даёт быстрый способ проверить результат перед копированием кода.
Инструмент работает полностью в вашем браузере. Ваш ввод обрабатывается на вашем устройстве и не отправляется на сервер. Он работает офлайн после загрузки страницы, так что вы можете продолжать использовать его без подключения; инструмент бесплатен.
Этот генератор полезен разработчикам любого уровня, которые хотят создать или предпросмотреть значения CSS-анимации. Он также может помочь DevOps-инженерам и командам, готовящим фикстуры или seed-данные с кодом анимации keyframe.
Шаг 1: Выберите свойство анимации: translate, rotate, scale, opacity или background. Оно определяет, какое изменение описывают сгенерированные кейфреймы.
Шаг 2: Задайте начальное и конечное значения для выбранного свойства. Эти значения определяют начальное и конечное состояния анимации.
Шаг 3: Выберите длительность, тайминг и число итераций. Сгенерированная сокращённая запись анимации отражает эти настройки.
Шаг 4: Сгенерируйте CSS и проверьте живой предпросмотр, чтобы увидеть результат.
Шаг 5: Скопируйте блок @keyframes, сокращённую запись animation или любые нужные сгенерированные значения.
Пример использования: Создавайте готовые к использованию значения анимации keyframe для тестов, фикстур или seed-данных, затем копируйте сгенерированный CSS в ваш проект.
Пример использования: Сгенерируйте сразу целый пакет значений анимации вместо придумывания значений вручную.
Пример использования: Получайте правильно случайные значения, а не полагайтесь на догадки, набранные на клавиатуре.
Пример использования: Предпросматривайте CSS-анимацию при выборе её свойства и начального/конечного значений, чтобы проверить результат перед копированием кода.
Пример использования: Постройте блок @keyframes и сокращённую запись animation для UI-прототипа, не создавая оба фрагмента с нуля.
Пример использования: Подготовьте код анимации для таблицы стилей, сгенерировав кейфреймы и сокращённую запись вместе.