Stylie - бесплатный конструктор веб-анимации CSS

Если вы боретесь с синтаксисом CSS3 и хотите простой способ создания анимации Stylie отличный инструмент для сохранения.

Это один из многих бесплатных генераторы кода с акцентом на чистые анимированные эффекты CSS. Stylie является полностью бесплатным и с открытым исходным кодом, размещен на GitHub и работает на базе библиотеки ключевых кадров Rekapi..

Библиотека Рекапи действительно использует JavaScript, так что это альтернатива чистому CSS. И, к счастью, веб-приложение Stylie поддерживает оба метода, так что вы можете экспортировать код в чистом CSS или JavaScript.

По умолчанию первая страница загружает демонстрацию непрерывной анимации с линейной анимацией. Вы можете играть с этим, редактируя настройки по умолчанию в Вкладка движения или путем редактирования Вкладка ключевых кадров.

В списке ключевых кадров вы можете добавить новые ключевые кадры, изменить их общую продолжительность, а также изменить стили анимации, включая движения, основанные на оси X / Y.

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

По умолчанию у вас будет тонна различные варианты смягчения связываться, и все они очень легко настроить.

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

Если бы я мог пожаловаться на одну вещь, это веб-приложение отсутствие адаптивного дизайна.

Мне не удалось заставить все приложение уместиться на моем 13-дюймовом экране MacBook Pro даже с полностью развернутым браузером. Это может быть проблемой, поскольку на странице отсутствует вертикальная полоса прокрутки и найдены многие параметры (например, экспортированный код). ниже в панели настроек.

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

Взгляните на приложение Stylie, чтобы увидеть, как оно работает, и попробуйте поиграть с некоторыми из опций. Как только вы сделаете анимацию, вы можете экспортировать CSS или JavaScript и использовать это для любого проекта, который вам нравится.

Если у вас возникли проблемы с изучением интерфейса, вы также можете посмотреть этот краткий учебник продолжительностью около 9 минут, охватывающий все основные функции..