Какие свойства преобразования можно анимировать?

Вы можете анимировать translateX, translateY, scale и rotate, а также прозрачность. Каждое свойство задается независимо на остановках ключевых кадров 0%, 50% и 100%.

Какие функции времени доступны?

Встроенные функции времени включают ease, linear, ease-in, ease-out и ease-in-out, а также пользовательский вариант cubic-bezier, чтобы вы могли создать уникальную кривую ускорения.

Можно ли сделать анимацию, которая будет повторяться бесконечно?

Да. Установите количество повторений на Infinite, и сгенерированный CSS будет использовать animation-iteration-count: infinite, что позволит анимации повторяться непрерывно.

Нужно ли знать CSS, чтобы использовать этот инструмент?

Нет. Инструмент полностью визуальный — просто двигайте ползунки и выбирайте значения из раскрывающихся списков. CSS генерируется автоматически и готов к копированию в любой проект.

Совместим ли сгенерированный CSS со всеми современными браузерами?

Да. Выходные данные используют стандартные @keyframes и сокращенное свойство анимации, которые поддерживаются всеми современными браузерами, включая Chrome, Firefox, Safari и Edge, без каких-либо префиксов производителей.

Загружает ли этот инструмент мои данные?

Нет. Всё выполняется прямо в вашем браузере, поэтому ваши данные никогда не покидают устройство — после загрузки страницы он работает даже офлайн.

🎬 Создатель ключевых кадров CSS

Создавайте анимации CSS-ключевых кадров за секунды — задавайте transform и opacity на каждом этапе, предварительно просмотрите анимацию в режиме реального времени, а затем скопируйте готовый @keyframes-код. Никакой установки, регистрации, полностью работает в вашем браузере.

Название анимации

Продолжительность (с)

Время

Повторить

Приватно по умолчанию. Этот инструмент работает полностью в вашем браузере — ничего из введённого не загружается и не сохраняется, и он работает офлайн.

Об инструменте

CSS Keyframe Builder позволяет создавать анимации @keyframes без написания даже одной строки кода вручную. Вы определяете свойства преобразования — translate (X и Y), scale и rotate, а также прозрачность на трех ключевых этапах: 0%, 50% и 100%. Продолжительность анимации, функция времени (ease, linear, ease-in, ease-out, ease-in-out или пользовательская кубическая кривая Безье) и количество повторений (конечное или бесконечное) настраиваются в панели. Живой анимированный предварительный просмотр мгновенно обновляется, чтобы вы могли настроить значения до тех пор, пока движение не будет выглядеть правильно. Когда вы будете готовы, нажмите Копировать, и полный блок @keyframes — включая сокращение анимации — будет скопирован в ваш буфер обмена и готов к вставке в ваш лист стилей. Все работает в браузере без загрузки файлов и без отправки данных в любое место.

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

Установите значения преобразования — translate X/Y, scale и rotate, а также прозрачность для остановки 0% (начало анимации).
Настройте значения остановки 50%, чтобы определить среднюю точку движения, или оставьте их по умолчанию, чтобы создать простой переход между двумя состояниями.
Установите значения остановки 100% для конечного состояния, затем настройте продолжительность (в секундах), функцию времени и количество повторений.
Смотрите, как живой предварительный просмотр в режиме реального времени обновляется, и тонко настраивайте любое значение, пока анимация не будет выглядеть именно так, как вам нужно.
Нажмите Копировать CSS, чтобы скопировать полный блок @keyframes и свойство анимации в ваш буфер обмена, а затем вставьте его напрямую в ваш лист стилей.

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

Какие свойства преобразования можно анимировать?: Вы можете анимировать translateX, translateY, scale и rotate, а также прозрачность. Каждое свойство задается независимо на остановках ключевых кадров 0%, 50% и 100%.
Какие функции времени доступны?: Встроенные функции времени включают ease, linear, ease-in, ease-out и ease-in-out, а также пользовательский вариант cubic-bezier, чтобы вы могли создать уникальную кривую ускорения.
Можно ли сделать анимацию, которая будет повторяться бесконечно?: Да. Установите количество повторений на Infinite, и сгенерированный CSS будет использовать animation-iteration-count: infinite, что позволит анимации повторяться непрерывно.
Нужно ли знать CSS, чтобы использовать этот инструмент?: Нет. Инструмент полностью визуальный — просто двигайте ползунки и выбирайте значения из раскрывающихся списков. CSS генерируется автоматически и готов к копированию в любой проект.
Совместим ли сгенерированный CSS со всеми современными браузерами?: Да. Выходные данные используют стандартные @keyframes и сокращенное свойство анимации, которые поддерживаются всеми современными браузерами, включая Chrome, Firefox, Safari и Edge, без каких-либо префиксов производителей.
Загружает ли этот инструмент мои данные?: Нет. Всё выполняется прямо в вашем браузере, поэтому ваши данные никогда не покидают устройство — после загрузки страницы он работает даже офлайн.