Stylie — бесплатный конструктор веб-анимации CSS
Если вы боретесь с синтаксисом CSS3 и хотите простой способ создания анимации Stylie отличный инструмент для сохранения.
Это один из многих бесплатных генераторов кода с акцентом на чисто анимированные CSS-эффекты. Stylie абсолютно бесплатный и с открытым исходным кодом, размещен на GitHub и питание от библиотеки ключевых кадров под названием Rekapi,
Библиотека Rekapi использует JavaScript, поэтому она является альтернативой чистому CSS. И, к счастью, веб-приложение Stylie поддерживает оба метода, поэтому вы можете экспортировать код в чистом CSS или JavaScript.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
По умолчанию первая страница загружает демонстрацию непрерывной анимации с линейной анимацией. Вы можете поиграть с этим, отредактировав настройки по умолчанию на вкладке «Движение» или отредактировав вкладку «Ключевые кадры».
В списке ключевых кадров вы можете добавить новые ключевые кадры, отредактировать их общую продолжительность и изменить стили анимации, включая движения, основанные на оси X / Y.
Читайте также: 10 CSS3 инструментов анимации, которые вы должны добавить в закладки
Во-первых, это будет выглядеть очень запутанныйособенно если вы никогда раньше не делали анимацию по ключевым кадрам. Однако чем больше вы играете с этим приложением, тем больше оно имеет смысла.
По умолчанию у вас будет куча различных вариантов смягчения, и их очень легко настроить.
График движения намного сложнее в освоении, но он дает вам гораздо больший контроль над замедлением анимации. Stylie даже позволяет сохранять пользовательские эффекты движения и повторно использовать их на вкладке «Ключевые кадры» для других анимаций.
Если бы я мог пожаловаться на одну вещь, это отсутствие адаптивного дизайна веб-приложения.
Мне не удалось разместить все приложение на моем 13-дюймовом экране MacBook Pro даже при полностью развернутом браузере. Это может быть проблемой, поскольку страница не имеет вертикальной полосы прокрутки, а многие параметры (например, экспортированный код) находятся ниже на панели настроек.
Но, кроме этого небольшого раздражения, у меня все получилось на моем большом мониторе. И качество экспорта не похоже ни на что другое, что вы найдете в Интернете.
Взгляните на Приложение Stylie чтобы увидеть, как это работает, и попробуйте поиграть с некоторыми из опций. Создав анимацию, вы можете экспортировать CSS или JavaScript и использовать их для любого понравившегося вам проекта.
Если у вас возникли проблемы с изучением интерфейса, вы также можете посмотреть этот краткий учебник охватывающий около 9 минут и охватывающий все основные функции.
Читайте также: Как создавать анимацию и переходы с помощью Motion UI
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)