Генератор CSS-анимаций
Создавайте CSS-анимации появления элемента с настраиваемыми параметрами.
Запустить инструмент
Генератор CSS-анимаций формирует готовый CSS-текст с блоком @keyframes и полным объявлением анимации элемента. Введите имя, длительность, функцию сглаживания, направление и режим заполнения, чтобы точно настроить параметры для своего веб-интерфейса. Если параметр не передан, применяются стандартные значения: имя fadeIn, длительность 1, функция ease, направление normal и режим none. Пустое поле имени обрабатывается отдельно: перед генерацией в него автоматически подставляется значение myAnimation.
Содержимое анимации фиксировано для создания плавного эффекта появления блока. На начальном этапе 0% элемент имеет opacity: 0 и смещается по вертикали на 20px вниз с помощью свойства transform. На конечном этапе 100% opacity достигает 1, а вертикальное смещение возвращается к 0. Скопируйте полученный CSS-код и подключите его к нужному селектору в таблице стилей. Генератор автоматически добавляет к числовому значению длительности единицу измерения s, поэтому результат сразу готов для вставки в разметку или файл стилей.
Инструкция
- Введите имя CSS-анимации. Если оставить поле пустым, перед генерацией будет использовано имя myAnimation.
- Укажите длительность в секундах. В готовом объявлении к числу добавляется единица s.
- Введите функцию сглаживания, направление и режим заполнения.
- Нажмите кнопку генерации и скопируйте полученный CSS-текст.
- Проверьте подключение анимации к нужному элементу в своём проекте.
Примеры
- Создайте анимацию с именем slideIn, длительностью 0.8 секунды, функцией ease-out, направлением normal и режимом forwards.
- Укажите имя fadeIn, длительность 1 секунду, функцию ease, направление normal и режим none, чтобы получить вариант для плавного появления элемента.
Частые вопросы
Что создаёт генератор?
Инструмент создаёт CSS-текст с блоком @keyframes и объявлением анимации элемента.
Какие параметры доступны?
Вы можете задать имя анимации, длительность, функцию сглаживания, направление и режим заполнения.
Какие значения применяются без параметров?
Если параметр не передан, используются имя fadeIn, длительность 1, функция ease, направление normal и режим none. Если поле имени оставить пустым, перед генерацией подставляется myAnimation.
Как меняется элемент?
В начале opacity равен 0, а вертикальное смещение составляет 20px. В конце opacity равен 1, а вертикальное смещение равно 0.