Elysia Tools
Навигация
Design
Генерирует ключевые кадры и свойства CSS анимации
Запуск
Заполните форму, запустите инструмент и посмотрите результат на этой же странице.
Примеры
Связано
Готово к запуску
Руководство по использованию инструмента
Генератор CSS-анимаций позволяет быстро создавать готовые фрагменты кода для ключевых кадров и свойств анимации, избавляя от необходимости писать их вручную.
Контекст
Необходимо сделать появление заголовка страницы при загрузке, чтобы улучшить визуальное восприятие.
Проблема
Написание ключевых кадров вручную занимает время и требует проверки синтаксиса.
Как использовать
Выберите тип 'fade', установите длительность 1.5 секунды и режим заполнения 'forwards'.
Результат
Получен готовый CSS-код с @keyframes и свойством animation, который можно сразу вставить в проект.
Контекст
Требуется привлечь внимание пользователя к кнопке призыва к действию с помощью анимации.
Проблема
Нужно создать бесконечный эффект отскока, который не будет перегружать браузер.
Как использовать
Выберите тип 'bounce', установите 'infinite' и настройте функцию времени 'ease-in-out'.
Результат
Сгенерирован оптимизированный CSS-код для бесконечной анимации элемента.
Нет, инструмент автоматически генерирует готовый код на основе выбранных вами настроек.
Да, выберите значение 'infinite' в поле 'Количество итераций'.
Используйте параметр 'Длительность (с)', чтобы задать время выполнения анимации в секундах.
Он определяет, какие стили применяются к элементу до и после выполнения анимации.
Да, вы можете выбрать 'reverse' или 'alternate' в настройках направления анимации.