Легко создавайте классные CSS-анимации с Animista

Есть тонны CSS анимации веб-приложений онлайн. Но очень немногие сравнивают с уровнем детализации и простотой использования Animista.

Это бесплатное веб-приложение позволяет вам генерировать пользовательские CSS-анимации одним нажатием кнопки. Вы выбираете между заранее разработанными движениями, такими как слайды, трансформации, колебания и даже анимации с тенями.

Создав анимацию, вы можете экспортировать код так же, как с другими генераторами CSS. За исключением того, что этот код гораздо проще работать и даже поставляется со встроенным инструментом минирования.

Поначалу интерфейс может показаться запутанным, но это только из-за того, сколько у вас вариантов!

Вы создаете собственные анимации следующие три основных шага и используя интерфейс сверху вниз:

1. Выберите стиль движения (качать, скользить, переворачивать) из кругов сверху
2. Настройте его с различными типами движения под
3. Изменить параметры анимации в плавающей левой панели параметров

Благодаря этому процессу вы можете изменить общую продолжительность анимации, стиль смягчения, задержку, почти все. И все это работает через чистый CSS3, что делает его еще более впечатляющим.

Также обратите внимание, что на самой верхней панели навигации вы можете выбирать между различные типы целевых стилей анимации.

по умолчанию “основной” который может работать практически на что угодно (зависание, щелчок или немедленная анимация). Другие цели включают текст страницы, фоновая анимация и даже пользовательская анимация входа чтобы отобразить скрытый элемент страницы.

Мне особенно нравится “внимание” ссылка вверху, которая имеет несколько интересных эффектов дрожания и дрожания для стилей кнопок. Они отлично работают на кнопках CTA, чтобы привлечь внимание и стимулировать взаимодействие с пользователем..

Как только вы закончите вносить коррективы, вы просто нажмите маленький значок скобки в правом верхнем углу панели предварительного просмотра.

Это приносит новую страницу с ваш полный класс CSS анимации вместе с ключевыми кадрами. Дополнительные функции позволяют минимизировать код а также включить авто-префикс который поддерживает старые веб-браузеры.

Я использовал множество пользовательских инструментов CSS-анимации, и, без сомнения, Animista - самый многофункциональный инструмент из всех. Сначала он абсолютно бесплатный и немного сложный, но как только вы поймете интерфейс, он станет лучшим генератором, который вы сможете использовать..

Чтобы попробовать, просто посетите домашнюю страницу и нажмите “Испытай меня”. Вы также можете поделиться своими мыслями и комплиментами с создателем веб-приложения @ ana108.