Генератор CSS-анимаций
Настройте шаблоны анимации или ключевые кадры и воспроизведите анимацию для проверки. Получите CSS для веб-страницы и пример использования HTML.
Возможности
Настройка анимации по шаблону
Выберите один из 12 типов, включая появление, исчезновение и вращение. Настройте длительность и повторы под свою задачу.
Редактирование промежуточных состояний
Задайте перемещение, вращение, масштаб и непрозрачность для каждого ключевого кадра и проверьте созданную анимацию.
Получение CSS и HTML
Скопируйте или сохраните CSS-анимацию и пример использования HTML с тем же классом.
Как пользоваться
Выберите шаблон
Выберите нужную анимацию и задайте длительность одного воспроизведения. При выборе другого шаблона также заменяются изменённые вами настройки.
Настройте только нужные параметры
Откройте параметры воспроизведения или ключевых кадров, чтобы изменить промежуточную анимацию, направление, повторы и другие настройки.
Создайте и воспроизведите анимацию
Проверьте результат с помощью «Создать CSS и предварительный просмотр». После изменения настроек создайте его заново.
Получите CSS и HTML
Примените CSS и добавьте класс toollet-motion к HTML-элементу. Используйте пример HTML вместе с CSS.
Когда пригодится
Создание анимации появления
Используйте шаблон плавного появления или появления снизу, чтобы настроить начальную анимацию и её скорость.
Анимация при взаимодействии с кнопкой
Измените условие запуска на наведение или фокус клавиатуры, чтобы анимация реагировала на взаимодействие.
Ключевые кадры и условия воспроизведения
Промежуточные состояния и длительность
Процент ключевого кадра показывает его положение в одном воспроизведении. Для анимации длиной 1 секунду отметка 50% соответствует 0,5 секунды. Сглаживание определяет, как меняются значения между ключевыми кадрами.
Перемещение, вращение и внешний вид
Горизонтальное и вертикальное положение задают величину смещения от исходной позиции. Масштаб 1 соответствует исходному размеру; непрозрачность 0 означает прозрачность, а 1 — полную непрозрачность.
Задержка, повторы и направление
Задержка добавляется только один раз перед началом воспроизведения. При конечном числе повторов общее время = задержка + длительность одного воспроизведения × число повторов. При чередовании направление меняется с прямого на обратное.
Состояния до и после воспроизведения
Выберите состояние, которое показывается во время задержки и после окончания воспроизведения. Обратное и чередующееся направления меняют, какие позиции ключевых кадров используются в начале и конце воспроизведения.
Настройка уменьшения движения
Созданный CSS учитывает настройку уменьшения движения на устройстве. Анимация останавливается и показывает конечное состояние, определяемое заданным направлением и числом повторов. При бесконечном воспроизведении используется конечное состояние первого цикла.
Часто задаваемые вопросы
Можно ли воспроизвести анимацию только один раз?
Отключите «Повторять» и задайте число повторов 1. Стандартные шаблоны запускаются один раз, а для вращения и парения изначально включено непрерывное повторение.
К какому элементу нужно применить CSS?
Добавьте класс toollet-motion к HTML-элементу и примените созданный CSS. Пример использования HTML — это фрагмент с кнопкой, а не полноценная отдельная веб-страница.
Сколько ключевых кадров можно создать?
Можно создать от 2 до 8 ключевых кадров, включая начало на 0% и конец на 100%. Новый кадр добавляется в середину самого широкого интервала. Начальный и конечный кадры нельзя удалить; фиксированы только их позиции в процентах.
После изменения настройки предварительный просмотр исчез.
При изменении настроек результаты очищаются, чтобы случайно не использовать анимацию или код от предыдущих параметров. Создайте результат снова, чтобы проверить текущие настройки.
Почему предварительный просмотр не движется?
Анимация останавливается, если на устройстве включено уменьшение движения. Для настроек при наведении и фокусе также проверьте условия запуска. Предварительный просмотр приостанавливается, когда вы переключаетесь на другую вкладку.
Можно ли использовать несколько анимаций на одной странице?
Созданные имена класса и ключевых кадров общие. Чтобы использовать отдельные анимации, измените оба имени для каждой анимации и внесите те же изменения в соответствующий HTML.
Ввод и результаты
- Настройки
- 12 шаблонов, от 2 до 8 ключевых кадров и длительность от 0,2 до 60 секунд.
- Воспроизведение
- Задержка от 0 до 60 секунд, от 1 до 100 повторов или бесконечный повтор, сглаживание, направление, состояния до и после воспроизведения и условия запуска.
- Вывод
- CSS и пример использования HTML. Задаётся только анимация; полноценная веб-страница или видеофайл не создаются.