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

• Мгновенное создание CSS-анимаций: создавайте keyframe-анимации CSS за секунды с нашим генератором. Выберите предустановку, настройте время и сглаживание, отредактируйте ключевые кадры и сразу получите готовый к продакшену CSS — без ожидания и обращений к серверу.
• Безопасный генератор CSS-анимаций онлайн: наш генератор работает полностью в браузере. Ваш CSS-код и настройки анимации никогда не покидают устройство, что гарантирует 100% конфиденциальность при каждом использовании онлайн-генератора.
• Генератор CSS-анимаций без установки: используйте генератор прямо в любом современном браузере без загрузок, плагинов и ПО. Создавайте CSS-анимации с любого устройства — компьютера, планшета или смартфона — мгновенно.
• 100% бесплатно с живым предпросмотром: генератор CSS-анимаций полностью бесплатен, без регистрации, ограничений по использованию и рекламы. У каждой анимации есть живой предпросмотр, чтобы вы точно видели, как выглядит ваша CSS-анимация, прежде чем копировать код.

• Анимации появления UI-компонентов: создавайте с помощью генератора CSS-анимаций аккуратные эффекты fade-in, slide-up и scale-in для модальных окон, карточек и выпадающих меню. Копируйте сгенерированную CSS-анимацию прямо в таблицу стилей компонента.
• Спиннеры и индикаторы загрузки: создавайте плавные CSS-анимации с бесконечным циклом для спиннеров загрузки, индикаторов прогресса и skeleton-экранов. Генератор CSS-анимаций сам управляет настройками поворота и iteration-count.
• Заметные кнопки призыва к действию: создавайте CSS-анимации пульсации, подпрыгивания или тряски, чтобы привлечь внимание к CTA-кнопкам и бейджам уведомлений. Посмотрите CSS-анимацию в живом предпросмотре, прежде чем добавлять её в продакшен-код.
• Эффекты появления при прокрутке: создайте keyframe-CSS для анимаций появления, запускаемых прокруткой, в паре с Intersection Observer. Генератор CSS-анимаций выдаёт @keyframes и сокращённое свойство animation, нужные для привязки к любому JS-триггеру.
• Обратная связь в микровзаимодействиях: проектируйте деликатные микровзаимодействия CSS — масштабирование при нажатии, галочки успеха и тряску ошибки, — которые улучшают ощущение отзывчивости. Используйте генератор CSS-анимаций, чтобы быстро перебирать время и сглаживание.
• Прототипирование и передача дизайна: прототипируйте идеи анимации в генераторе CSS-анимаций и делитесь точным CSS с дизайнерами или разработчиками. Загружаемый файл .css снимает неоднозначность при передаче дизайна в код.

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

1. Выберите предустановку и настройте: выберите стартовую предустановку (Fade In, Slide Up, Scale In, Spin, Bounce или «Своя») в генераторе CSS-анимаций. Настройте длительность, задержку, число итераций, функцию сглаживания, направление и режим заполнения. Каждое изменение сразу отражается в редакторе ключевых кадров.
2. Отредактируйте ключевые кадры и сгенерируйте: добавляйте, удаляйте и изменяйте опорные кадры прямо в редакторе. У каждого ключевого кадра есть процент смещения (0–100) и поле CSS-свойств. Нажмите «Сгенерировать CSS», и генератор CSS-анимаций обработает вашу конфигурацию полностью в браузере — данные не покидают ваше устройство.
3. Посмотрите, скопируйте или скачайте: нажмите «Предпросмотр анимации», чтобы увидеть вашу CSS-анимацию в живом проигрывании в окне предпросмотра. Затем скопируйте сгенерированный CSS в буфер обмена или скачайте его файлом .css, готовым к использованию в любом проекте.

• Блок @keyframes: полное правило keyframes со всеми заданными опорными кадрами, отсортированными по проценту смещения, с корректными отступами и завершением каждого CSS-свойства.
• Сокращённое свойство animation: готовое к использованию свойство animation, объединяющее имя, длительность, сглаживание, задержку, число итераций, направление и режим заполнения в правильном порядке.
• Класс-селектор: сгенерированная CSS-анимация обёрнута в класс .animated-element, который можно переименовать или применить к любому селектору в таблице стилей.
• Скачиваемый файл .css: весь результат доступен как именованный .css-файл (например, myAnimation-animation.css) для прямого импорта в любой проект.

Функция сглаживания (она же animation-timing-function) определяет, как CSS-анимация ускоряется и замедляется между ключевыми кадрами. Linear движется с постоянной скоростью. Ease-in начинается медленно и ускоряется. Ease-out начинается быстро и замедляется — идеально для анимаций появления. Ease-in-out плавна в обе стороны. Предустановка Back (Overshoot) использует кривую cubic-bezier, которая слегка проскакивает цель, создавая пружинящее ощущение. Режим заполнения определяет, какие стили применяются до начала анимации (backwards) и после её завершения (forwards) — установите forwards, чтобы сохранить состояние последнего ключевого кадра после завершения анимации.